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) }
o puede usar la función de flecha
onSubmit={ (e) => this.submit(e) }
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()}