在 JSX 和 React 中使用 onBlur

IT技术 html reactjs reactive-programming react-jsx onblur
2021-05-13 14:19:32

我正在尝试创建一个密码确认功能，该功能仅在用户离开确认字段后才呈现错误。我正在使用 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;
},

当我运行页面时，输入冲突密码时不会显示消息。

1个回答

这里有几个问题。

1：onBlur 需要回调，而您正在调用renderPasswordConfirmError并使用返回值，该值为 null。

2：你需要一个地方来渲染错误。

3：您需要一个标志来跟踪“并且我正在验证”，您可以在模糊时将其设置为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;
},
其它你可能感兴趣的问题
上一篇滚动到 React 中溢出的 div 的底部 下一篇使用 npm init react-app 时，Docker 容器在启动后立即退出