Formik useField

Question

我正在尝试理解 useFormik() 函数。

下面是一个语法示例：

 const MyTextField = ({ label, ...props }) => {
   const [field, meta, helpers] = useField(props);
   return (
     <>
       <label>
         {label}
         <input {...field} {...props} />
       </label>
       {meta.touched && meta.error ? (
         <div className="error">{meta.error}</div>
       ) : null}
     </>
   );
 };

我不明白的是输入语法，为什么我们可以将字段和道具扩展到输入标签中？有谁知道背后的逻辑吗？

<input {...field} {...props} />

欢迎大家回答，提前谢谢！

在StackOverflow和官方文档上都查过了，还是没看懂

Answer 1

所以

useField

钩子返回一个包含三个值的数组。

1. FieldInputProps
2. FieldMetaProps
3. FieldHelperProps

输入标签需要其必要的处理程序和值，如

value

、

onChange

等。所有这些都存在于

FieldInputProps

对象中，您在代码中将其解构为

field

。

const [field, meta, helpers] = useField(props);

所以，

field

本质上是一个具有这些可能值的对象 [1]

{
  name: 'somename',
  onBlur: () => {}
  onChange: () => {}
  value: 'somevalue',
}

使用传播语法，我们基本上只是将所有对象直接传递给

input

标签，而不是像这样手动传递一个一个，

<input value={field.value} name={field.name} onChange={field.onChange} ... />

v/s

使用扩展运算符 [2]

<input {...field} />

您的

props

对象也是如此。

参考：

1. https://formik.org/docs/api/useField#fieldinputpropsvalue
2. https://sentry.io/answers/react-spread-operator-three-dots/