html – 使用onBlur与JSX和React

发布时间：2020-12-14 18:50:37 所属栏目：资源来源：网络整理

导读：我正在尝试创建密码确认功能,只有在用户离开确认字段后才会显示错误.我正在与Facebook的React JS合作.这是我的输入组件： input type="password" placeholder="Password (confirm)" valueLink={this.linkState('password2')} onBlur={this.renderPasswordCon

我正在尝试创建密码确认功能,只有在用户离开确认字段后才会显示错误.我正在与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：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;
},

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!