uncaught - manejo de archivos en javascript

Reaccionar: esto es nulo en el controlador de eventos

Question

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?

Answer 1

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

Answer 2

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)}

Answer 3

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()}