Réagir: c'est nul dans le gestionnaire d'événements
J'ai un composant LoginForm. Je veux vérifier avant de soumettre, que l' loginName et le password sont définis. J'ai essayé avec ce code (beaucoup de choses ont été omises):
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;
Cependant, je reçois un TypeError dans le gestionnaire d'événements, disant que this est nul.
Que dois-je faire?
- JavaScript perdant cette référence d'objet "this" avec des propriétés privées / publiques
- Javascript simple pour imiter le comportement jQuery de l'utiliser dans les gestionnaires d'événements
- Javascript 'this' écrasant le combinateur Z et toutes les autres fonctions récursives
- Comment lier onclick handlers à `this` correctement sur React
- React.js et ES6: raison de ne pas lier une fonction dans le constructeur
- Les rappels de Javascript perdent 'ceci'
- La raison d'utiliser JS .call () méthode?
- Comment fonctionne.bind.bind (Function.call) uncurry?
- ES6 arrow function lexical this in V8
- Ceci est indéfini à l'intérieur de la fonction de flèche
Vous devez définir this pour la méthode de submit car maintenant this n'est undefined , pour cette opération, vous pouvez utiliser .bind
onSubmit={ this.submit.bind(this) }
Example
Ou vous pouvez utiliser la fonction flèche
onSubmit={ (e) => this.submit(e) }
Example
Réagir était un rappel contraignant pour cela avant vous. Mais maintenant il est parti, et vous devez lier vous-même ou faire envelopper comme
onSubmit={() => this.submit()}
Pour ceux qui utilisent Babel, vous pouvez utiliser bind operator avec transform-function-bind plugin:
onSubmit={::this.submit}
Qui est un sucre syntaxique pour:
onSubmit={this.submit.bind(this)}