javascript - 对最终形式做出反应 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 事件验证，它工作正常。如何添加 onBlur 事件以及显示验证呢？

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

Answer 1

最终形式依赖于知道字段何时触发blur事件。您会注意到，如果您检查input提供给您的渲染函数的参数，react-final-form 会通过onBlur向该input参数添加一个处理程序来执行此操作，然后您通常将其作为道具传播到您的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>;