Verwendung von onBlur mit JSX und React

Ich versuche, eine Passwortbestätigungsfunktion zu erstellen, die erst dann einen Fehler ausgibt, wenn ein Benutzer das Bestätigungsfeld verlässt. Ich arbeite mit Facebooks React JS. Dies ist meine Eingabekomponente:

<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 starte, wird die Meldung nicht angezeigt, wenn widersprüchliche Passwörter eingegeben werden.

Hier gibt es ein paar Probleme.

1: onBlur erwartet einen Rückruf, und Sie rufen an renderPasswordConfirmError und Verwenden des Rückgabewerts, der null ist.

2: Sie brauchen einen Ort, um den Fehler zu rendern.

3: Sie benötigen ein Flag, um “und ich validiere” nachzuverfolgen, das Sie bei Unschärfe auf “true” setzen würden. Sie können dies je nach gewünschtem Verhalten auf “false on focus” setzen, wenn Sie möchten.

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