web-dev-qa-db-ja.com

JSXおよびReactでのonBlurの使用

ユーザーが確認フィールドを離れた後にのみエラーを表示するパスワード確認機能を作成しようとしています。私はFacebookのReact JSで作業しています。これは私の入力コンポーネントです。

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

これは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;
},

ページを実行すると、競合するパスワードが入力されたときにメッセージが表示されません。

htmlreactjsreactive-programmingreact-jsxonblur
26
user3862066

ここにはいくつかの問題があります。

1：onBlurはコールバックを予期しており、renderPasswordConfirmErrorを呼び出して戻り値（null）を使用しています。

2：エラーを表示する場所が必要です。

3：「and I Validating」を追跡するためのフラグが必要です。これは、ぼかし時にtrueに設定します。必要に応じて、目的の動作に応じて、フォーカス時にこれをfalseに設定できます。

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