与错误道具一起使用时，Formik 字段失去焦点

Question

当我在自定义字段中键入内容时，它会失去焦点，需要再次单击才能添加数据，下面是用于编码的沙箱 link。只有当我传递错误并触摸道具来检查验证时才会发生，如果我删除它，它会完美地工作。

https://codesandbox.io/s/formik-example-forked-w0bub?file=/index.js

我使用的浏览器是 windows

的 Chrom

Answer 1

功能组件内部的input每次状态改变时都会重新创建。

阅读this blog post以了解更多嵌套功能组件的行为

为避免重新创建问题，您可以按照Formik example创建其他功能组件并在您的组件中使用它。

const MyInput = ({ field, form, ...props }) => {
  return <input {...field} {...form} {...props} />;
};

...

<Field
  id="email"
  name="email"
  placeholder="Email"
  component={MyInput}
/>

这里是 codesandbox for demo.

与错误道具一起使用时，Formik 字段失去焦点

Formik field loses focus when used with error props

javascript

reactjs

formik