在 JSX 和 React 中使用 onBlur

Posted 2023-02-16

【中文标题】在 JSX 和 React 中使用 onBlur

【英文标题】：Using onBlur with JSX and React

【发布时间】：2014-09-12 10:53:01

【问题描述】：

我正在尝试创建一个密码确认功能，该功能仅在用户离开确认字段后才呈现错误。我正在使用 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 on focus，具体取决于您想要的行为。

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