w3schools uncaught read property por manejo linea leer example contenido cannot archivos archivo javascript reactjs this

uncaught - manejo de archivos en javascript



Reaccionar: esto es nulo en el controlador de eventos (3)

Tengo un componente de Login Form. Quiero verificar antes de enviar, que tanto el loginName password como la password están configurados. Intenté con este código (se omitieron muchas cosas):

class LoginForm extends Component { constructor() { super(); this.state = { error: "", loginName: "", password: "", remember: true }; } submit(e) { e.preventDefault(); if(!this.state.loginName || !this.state.password) { //this is null this.setState({ error: "Fill in both fields" }); } else { console.log("submitting form"); } } render() { return ( <div className="col-xs-12 col-sm-6 col-md-4"> <form className="login" onSubmit={this.submit}> <button type="submit" className="btn btn-default">Sign in</button> </form> </div> ); } } export default LoginForm;

sin embargo, obtengo un TypeError en el controlador de eventos, diciendo que this es nulo.

¿Qué debería estar haciendo?


Necesita configurar this para el método de submit porque ahora this undefined está undefined , para esta operación puede usar .bind

onSubmit={ this.submit.bind(this) }

Example

o puede usar la función de flecha

onSubmit={ (e) => this.submit(e) }

Example


Para aquellos que usan Babel, puede usar el operador bind con el complemento transform-function-bind :

onSubmit={::this.submit}

que es un azúcar sintáctico para:

onSubmit={this.submit.bind(this)}


Reaccionar era obligatorio para esto antes. Pero ahora se ha ido, y usted tiene que atarlo usted mismo o hacer envoltorio como

onSubmit={() => this.submit()}