OnBlur mit JSX und React verwenden

Ich versuche, erstellen Sie ein Passwort-Bestätigungs-Funktion, macht einen Fehler nur, nachdem sich ein Benutzer verlässt das Feld Bestätigung. Ich arbeite mit Facebook ' s React JS. Das ist mein input-Komponente:

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

Dies ist 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;
},

Wenn ich die Seite ausführen die Meldung wird nicht angezeigt, wenn entsprechende Passwörter eingegeben werden.

InformationsquelleAutor der Frage user3862066 | 2014-07-21

  1. 28

    Es gibt ein paar Probleme hier.

    1: onBlur erwartet einen Rückruf, und Sie rufen renderPasswordConfirmError und mit der return-Wert null ist.

    2: Sie brauchen einen Platz zum Rendern der Fehler.

    3: Sie benötigen ein flag zum track "ich und Validierung", die Sie auf true gesetzt, auf Weichzeichnen. Sie können diese Einstellung auf false, auf den Fokus, wenn Sie wollen, je nach Ihren gewünschten Verhalten.

    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;
},

    InformationsquelleAutor der Antwort Jared Forsyth

Schreibe einen Kommentar