反应最终形式 onBlur 阻止验证

Question

为什么添加 onBlur 事件会阻止验证，如下例所示

<Field name="firstName" validate={required}>
    {({ input, meta }) => (
        <div>
        <label>First Name</label>
        <input {...input} onBlur={() => console.log('blur')} type="text" placeholder="First Name" />
        {meta.error && meta.touched && <span>{meta.error}</span>}
        </div>
    )}
</Field>

如果我删除 onBlur 事件验证，它会起作用 fine.How 可以添加 onBlur 事件并显示验证吗？

这是一个工作示例：https://codesandbox.io/s/qzz8wk076

Answer 1

最终形式依赖于知道字段何时触发 blur 事件。如果您检查提供给渲染函数的 input 参数，您会注意到，react-final-form 通过向这个 input 参数添加一个 onBlur 处理程序来做到这一点，然后您通常会传播作为 input 元素的道具。如果您还想要自己的自定义 onBlur 行为，则必须在自定义模糊处理程序中调用 input.onBlur，如下所示：

<Field name="firstName" validate={required}>
  {({ input, meta }) => (
    <div>
      <label>First Name</label>
      <input
        {...input}
        onBlur={e => {
          console.log("blur");
          input.onBlur(e);
        }}
        type="text"
        placeholder="First Name"
      />
      {meta.error && meta.touched && <span>{meta.error}</span>}
    </div>
  )}
</Field>;

反应最终形式 onBlur 阻止验证

react final form onBlur prevents validation

javascript

reactjs

react-final-form