React : Generic update fields.

Maybe the most commont task on react programming, is to update the value on the html component.

 We have to attacth the state property to the value property on the field in order to set the values, and we have to bind the Onchange property on the react component to a method that will update the value on the state.

   This how I implement this both properties,

  //Onsingle method for all the properties.

updateUserValues = (e,fieldname) => {

e.preventDefault();

//We clone the object

const newvalues = {

...this.state.usuarioinfo

};

//We update the field property

newvalues[fieldname]=e.target.value;

//We update the state

this.setState({

usuarioinfo :{

...newvalues

}

});

}

    <input name=""

value={props.usuarioinfo.phonenumber} <- bind="" component="" div="" of="" property="" the="" value="" we="">

//we bind the onchange property to our generic method, sending the e argument, and

// the fieldname that we are going to update.

onChange={(e) => props.updateUserValues(e,'phonenumber') }

type="text"/>

VIM TIP

Problema: una tabla con muchos campos. Select
,[campo1]
,[campo2]
,[campo3]
,[campon]
from x;

Tienes que hacer el isnull(campo,'') as campo.

Solucion vim :
1.-selecionar los campos, vj :visual mode , j baja hasta que tengas todos los campos.
2.-norm f,aisnull( , busca la primera coma, inserta despues del cursor isnull(,
3.-gv vuelve a selecionar la ultima selccion.
4.-norm f]a,'') as , busca busca ], entonces inserta despus ,'') as,
5.-gv
6.-norm f[wy$ap , busca el primer [, seleciona la siguiente palabra, la copia, ir al final de la linea, insertar despues.

Resultado
select
,isnull(campo1,'') as campo1,
etc....
from tablax;