在模糊上反应最终形式会阻止验证

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事件。您会注意到，如果您检查提供给 render 函数的 input 参数，react-final-form 通过向此input参数添加一个onBlur处理程序来执行此操作，然后您通常将其作为 prop 传播到 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>;