Si quieres hacer el ejemplo de la suma, solo es necesario guardar en el state
los valores de NumeroA
y NumeroB
, y en cada uno poner el mismo handler:
constructor(){
// En el estado solo ponemos las variables necesarias:
this.state = { A: 0, B: 0 };
// Aseguramos el handler para los eventos onChange:
this.handleInputChange = this.handleInputChange.bind(this);
}
// Escribimos este método genérico para controlar los cambios en cualquier input:
handleInputChange(e){
const target = e.target;
const name = target.name;
const value = target.value;
this.setState({ [name]: value });
}
render(){
// La suma no necesita ser parte del estado, la podemos definir aquí:
let suma = parseInt(this.state.A) + parseInt(this.state.B);
return(
<form>
<label htmlFor="NumA">Número A:</label>
<input name="A" onChange={this.handleInputChange} value={this.state.A} id="NumA" />
<label htmlFor="NumB">Número B:</label>
<input name="B" onChange={this.handleInputChange} value={this.state.B} id="NumB" />
<label htmlFor="NumSum">SUMA:</label>
<input value={suma} id="NumSum" />
</form>
);
}
Te recomiendo leer:
Respecto a
ComponentDidUpdate
y símiles, estás entrando a otro terreno.
ComponentDidUpdate es parte del ciclo de vida de los componentes de React, el cual básicamente funciona así:
Montaje
- Se llama al
constructor
del componente, donde se inicializa el state
.
- Antes de montar el elemento se llama a
ComponentWillmount
(antes del primer render
). Nada importante a destacar aquí; de hecho en la documentación dice:
Evita introducir cualquier acción de efectos secundarios o suscripciones (Ajax para los cuates) en este método. Para esos casos, use ComponentDidMount
en su lugar.
.
- Se ejecuta el primer
render
que pintará el elemento en pantalla.
- Si es necesario obtener información desde el servidor (Ajax), se ejecuta
ComponentDidMount
. Aquí puedes cambiar el estado inicial.
Una vez montado el elemento, puede comenzar el ciclo de
Actualización
ComponentWillReceiveProps(nextProps)
será invocado si las props
del elemento cambian.
Si necesitas actualizar el estado en respuesta a cambios en los props
(por ejemplo, para resetearlo), debes comparar this.props
y nextProps
y ejecutar las transiciones de estado usando this.setState()
en este método.
- Para validar si el cambio de estado afectará la interfaz, puedes utilizar
shouldComponentUpdate
que debe devolver true
o false
indicando si el elemento debe volver a invocar a render
o no.
- Si no usamos el método anterior, o si retornó
true
, pasamos a ComponentWillUpdate
. Nada destacable aquí, solo que no debes invocar a this.setState aquí.
- Se ejecuta nuevamente el
render
con los cambios aplicados.
- Puedes ejecutar cualquier validación extra después del renderizado en
ComponentDidUpdate
. Nada destacable aquí tampoco, pero puede servirte si combinas React con jQuery.
Si necesitas hacer algo antes de que el elemento sea destruido, puedes utilizar ComponentWillUnmount
y también tienes ComponentDidCatch
para control de errores.