Estoy leyendo la sección Formularios de la documentación de reactjs y probé este código para demostrar el uso de onChange ( JSBIN ).
var React= require('react'); var ControlledForm= React.createClass({ getInitialState: function() { return { value: "initial value" }; }, handleChange: function(event) { console.log(this.state.value); this.setState({value: event.target.value}); console.log(this.state.value); }, render: function() { return ( <input type="text" value={this.state.value} onChange={this.handleChange}/> ); } }); React.render( <ControlledForm/>, document.getElementById('mount') ); Cuando actualizo el valor <input/> en el navegador, el segundo console.log dentro de la devolución de llamada handleChange imprime el mismo value que el primer console.log , por qué no puedo ver el resultado de this.setState({value: event.target.value}) en el ámbito de la devolución de llamada handleChange ?
De la documentación de React:
setState()no muta inmediatamentethis.statesino que crea una transición de estado pendiente. Accederthis.statedespués de llamar a este método puede potencialmente devolver el valor existente. No hay garantía de funcionamiento síncrono de las llamadas asetStatey las llamadas pueden agruparse por lotes para mejorar el rendimiento.
Si desea que se ejecute una función después de que se produzca el cambio de estado, pásela como una devolución de llamada.
this.setState({value: event.target.value}, function () { console.log(this.state.value); });Como se menciona en la documentación de React, no hay garantía de que setState se active de forma síncrona, por lo que su console.log puede devolver el estado antes de que se actualice.
Michael Parker menciona pasar una devolución de llamada dentro de setState . Otra forma de manejar la lógica después del cambio de estado es a través del método de ciclo de vida componentDidUpdate , que es el método recomendado en los documentos de React.
En general, recomendamos usar componentDidUpdate() para dicha lógica en su lugar.
Esto es particularmente útil cuando se pueden setState sucesivos y le gustaría activar la misma función después de cada cambio de estado. En lugar de agregar una devolución de llamada a cada setState , puede colocar la función dentro de componentDidUpdate , con una lógica específica dentro si es necesario.
// example componentDidUpdate(prevProps, prevState) { if (this.state.value > prevState.value) { this.foo(); } }Podría intentar usar ES7 async/await. Por ejemplo, usando su ejemplo:
handleChange: async function(event) { console.log(this.state.value); await this.setState({value: event.target.value}); console.log(this.state.value); }