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

反应最终形式onBlur阻止验证

1 个答案: