web-dev-qa-db-fra.com

Utilisation de onBlur avec JSX et React

J'essaie de créer une fonctionnalité de confirmation de mot de passe qui génère une erreur uniquement lorsqu'un utilisateur quitte le champ de confirmation. Je travaille avec Facebook React JS. Ceci est mon composant d'entrée:

<input
    type="password"
    placeholder="Password (confirm)"
    valueLink={this.linkState('password2')}
    onBlur={this.renderPasswordConfirmError()}
 />

C'est renderPasswordConfirmError:

renderPasswordConfirmError: function() {
  if (this.state.password !== this.state.password2) {
    return (
      <div>
        <label className="error">Please enter the same password again.</label>
      </div>
    );
  }  
  return null;
},

Lorsque je lance la page, le message ne s'affiche pas lorsque des mots de passe en conflit sont entrés.

htmlreactjsreactive-programmingreact-jsxonblur
26
user3862066

Il y a quelques problèmes ici.

1: onBlur attend un rappel, et vous appelez renderPasswordConfirmError et utilisez la valeur de retour, qui est null.

2: vous avez besoin d'un endroit pour rendre l'erreur.

3: vous avez besoin d'un drapeau pour suivre "and I validating", que vous définiriez sur true sur flou. Vous pouvez définir la valeur false sur le focus si vous le souhaitez, en fonction du comportement souhaité.

handleBlur: function () {
  this.setState({validating: true});
},
render: function () {
  return <div>
    ...
    <input
        type="password"
        placeholder="Password (confirm)"
        valueLink={this.linkState('password2')}
        onBlur={this.handleBlur}
     />
    ...
    {this.renderPasswordConfirmError()}
  </div>
},
renderPasswordConfirmError: function() {
  if (this.state.validating && this.state.password !== this.state.password2) {
    return (
      <div>
        <label className="error">Please enter the same password again.</label>
      </div>
    );
  }  
  return null;
},
39
Jared Forsyth