javascript - validacion - Formulario de respuesta enCambiar-> setState un paso atrás

validar formulario javascript html5

Question

Encontré este problema construyendo una aplicación web y la jsfiddle en este jsfiddle . Básicamente, me gustaría una entrada para llamar a this.setState({message: input_val}) cada vez que this.setState({message: input_val}) algo en él, luego lo paso a la clase principal de la aplicación que luego vuelve a mostrar el mensaje en la clase Message. Sin embargo, el resultado parece estar siempre un paso por detrás de lo que realmente escribo. La demostración de jsfiddle debe ser autoexplicativa. Me pregunto si hice algo mal para provocar esto.

html

<script src="http://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id=''app''></div>

js

var App = React.createClass({
    getInitialState: function() {
        return {message: ''''}
    },
    appHandleSubmit: function(state) {
        this.setState({message: state.message});
        console.log(this.state.message);
    },
    render: function() {
        return (
            <div className=''myApp''>
            <MyForm onChange={this.appHandleSubmit}/>
            <Message message={this.state.message}/>
            </div>
        );
    }
});

var MyForm = React.createClass({
    handleSubmit: function() {
        this.props.onChange(this.state);
    },
    handleChange: function(e) {
        console.log(e.target.value);
        this.setState({message: e.target.value});
        this.handleSubmit();
    },
    render: function() {
        return (
            <form className="reactForm" onChange={this.handleChange}>
            <input type=''text'' />
            </form>
        );
    }
});

var Message = React.createClass({
    render: function() {
        return (
            <div className="message">
                <p>{this.props.message}</p>
            </div>
        )
    }
});

React.render(
    <App />,
    document.getElementById(''app'')
);

Answer 1

Hay una manera mucho más simple de hacer esto, setState(updater, callback) es una función asíncrona y toma la devolución de llamada como segundo argumento,

Simplemente pase el handleSubmit como una devolución de llamada al método setState , de esta manera, después de que se complete setState, solo se ejecutará handleSubmit .

Por ej.

handleChange: function(e) {
    console.log(e.target.value);
    this.setState({message: e.target.value}, this.handleSubmit);
}

Intenta cambiar el método handleChange () como arriba y funcionará.

para la sintaxis del uso de setState, consulte este link

Answer 2

Me resultaba muy engorroso definir 3 funciones de controlador solo para obtener algún valor del estado de un componente, por lo que decidí no utilizar el estado en absoluto. Acabo de definir una propiedad adicional para el componente que almacena el valor deseado.

Así que terminé con un código que se veía algo como esto:

//...
},
text: '''',
handleChange: function(event) {
  this.text = event.target.value;
  this.forceUpdate();
},
render: function() {
    return <div>
      <InputComponent onChange={this.handleChange}/>
      <DisplayComponent textToDisplay={this.text}/>
      </div>
}
//...

Answer 3

No hay ninguna razón para que MyForm use el estado aquí. También es extraño colocar el onChange en el formulario en lugar de la entrada que le interesa. Los componentes controlados deben ser preferidos porque su comportamiento es más obvio, y cada vez que cambia el estado del mensaje de la aplicación (incluso si, por ejemplo, permite que el mensaje cambie posteriormente), será correcto en todos lados.

Esto también hace que su código sea un poco más corto y considerablemente más simple.

var App = React.createClass({
    getInitialState: function() {
        return {message: ''''}
    },
    appHandleSubmit: function(message) {
        this.setState({message: message});
    },
    render: function() {
        return (
            <div className=''myApp''>
                <MyForm onChange={this.appHandleSubmit} 
                        message={this.state.message} />
                <Message message={this.state.message}/>
            </div>
        );
    }
});

var MyForm = React.createClass({
    handleInputChange: function(e){
        this.props.onChange(e.target.value);
    },
    // now always in sync with the parent''s state
    render: function() {
        return (
            <form className="reactForm">
                <input type=''text'' onChange={this.handleInputChange}
                       value={this.props.message} />
            </form>
        );
    }
});

jsbin

Answer 4

Una llamada a setState no es sincrónica. Crea una "transición de estado pendiente". (Vea here para más detalles). Debería pasar explícitamente el nuevo valor de input como parte del evento que se está handleSubmit (como para handleSubmit en su ejemplo).

Mira this ejemplo.

handleSubmit: function(txt) {
    this.props.onChange(txt);
},
handleChange: function(e) {
    var value = e.target.value;
    this.setState({message: value});
    this.handleSubmit(value);
},