在 formik 中，shorthand 输入字段不起作用

Question

在 Formik 中，我尝试在我的输入字段上使用 {...formik.getFieldProps('email')} 而不是使用值、onChange 和 onBlur。但它不起作用。

这行得通：

<input id="email" name="email" type="text" value={formik.values.email} onChange={formik.handleChange} onBlur={formik.handleBlur} />

但这不是 :

<input id="email" type="text" {...formik.getFieldProps("email")} />

代码在这里：https://codesandbox.io/s/formik-pb-with-getfieldprops-83tze?fontsize=14

有什么想法吗？谢谢！

Answer 1

正如 MiDas 所说，如果您使用的是最新版本，那么您所做的应该有效。

我会提到一个更简洁的替代方案：Field 组件。

字段组件为您处理字段属性传播。

简单示例：

<Field name="email" type="text" />

请注意，您不需要执行 {...formik.getFieldProps("email")} 或任何其他 "boilerplate"。

与 Field 相关的是 useField，它可用于制作自定义表单组件，同样易于使用 - 无需 "boilerplate"。

自定义组件：

function TextInputWithLabel({ label, ...props }) {
  // useField() returns [formik.getFieldProps(), formik.getFieldMeta()]
  // which we can spread on <input> and also replace ErrorMessage entirely.
  const [field, meta] = useField(props);
  return (
    <>
      <label
        htmlFor={props.id || props.name}
        css={{ backgroundColor: props.backgroundColor }}
      >
        {label}
      </label>
      <input className="text-input" {...field} type="text" {...props} />
      {meta.touched && meta.error ? (
        <div className="error">{meta.error}</div>
      ) : null}
    </>
  );
}

用法：

<TextInputWithLabel name="input1" label="Random comment" />

如 code from codesandbox 中所示。

在 formik 中，shorthand 输入字段不起作用

In formik, shorthand input field is not working

javascript

reactjs

formik