41

ユーザーが確認フィールドを離れた後にのみエラーを表示するパスワード確認機能を作成しようとしています。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;
},

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

4

1 に答える 1

55

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

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

2: エラーをレンダリングする場所が必要です。

3: 「and I validation」を追跡するためのフラグが必要です。これは、ぼかし時に 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;
},
于 2014-07-21T21:19:11.333 に答える