Использование onBlur с JSX и React

Я пытаюсь создать функцию подтверждение пароля, что делает ошибку только после того, как пользователь покидает поле подтверждения. Я работаю с 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;
},

когда я запускаю страницу, сообщение не отображается при вводе конфликтующих паролей.

20
html onblur react-jsx reactive-programming reactjs

1 ответов

здесь есть несколько проблем.

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