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

问题描述

在Formik中，我尝试在输入字段上使用{... formik.getFieldProps('email')}而不是使用value，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

有什么想法吗?谢谢！

解决方案

正如MiDas所说，如果您使用的是最新版本，您正在做的事情应该会起作用.

我将提到一个更为简洁的替代方法:字段组件. /p>

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

简单的例子:

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

请注意，您无需执行{...formik.getFieldProps("email")}或任何其他样板".

---

与Field有关的是useField，它可用于制作自定义表单组件，就像使用起来一样容易-无需样板".

自定义组件:

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" />

如来自codeandbox的代码所示.. >

In Formik, I try to use {...formik.getFieldProps('email')} on my input fieldinstead of using value, onChange, and onBlur. But it's not working.

This works :

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

But this doesn't :

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

Code is here : https://codesandbox.io/s/formik-pb-with-getfieldprops-83tze?fontsize=14

Any ideas ?Thanks !

解决方案

As MiDas said, what you are doing should work if you are on latest version.

I'll mention an even more concise alternative: the Field component.

Field component handles the field property propagation for you.

Simple example:

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

Notice that you don't need to do {...formik.getFieldProps("email")}, or any other "boilerplate".

---

Related to Field is useField, which can be used to make custom form components just as easy to use - no "boilerplate" needed.

A custom component:

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}
    </>
  );
}

Usage:

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

As seen in code from codesandbox.

这篇关于在formik中，速记输入字段不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！