如何在 React 中使用 Formik 的自定义输入？

Posted 2023-02-22

【中文标题】如何在 React 中使用 Formik 的自定义输入？

【英文标题】：How to use custom Input with Formik in React?

【发布时间】：2019-02-15 17:06:54

【问题描述】：

我正在尝试在Formik 中使用DatePicker。但是当我单击 DatePicker 的日期时，它的表单值不会改变。相反，我收到了这个错误：

未捕获的类型错误：e.persist 不是函数 在 Formik._this.handleChange (formik.es6.js:5960)

我简写代码，代码如下

const SomeComponent = () => (
    <Formik
        render=(
            values,
            handleSubmit,
            handleChange,
            setFieldValue
        ) => 
            return (
                <div>
                    <form onSubmit=handleSubmit>
                        <DatePicker
                            name='joinedAt'
                            value=values['joinedAt']
                            onChange=handleChange
                        />
                    </form>
                </div>
            )
        
    />
)

我在 Google 上搜索了一些文档，https://github.com/jaredpalmer/formik/issues/187 和 https://github.com/jaredpalmer/formik/issues/86

所以我尝试了下面的方法，但它不起作用。

 ...setFieldValue

 <DatePicker
   name='joinedAt'
   value=values['joinedAt']
   onChange=setFieldValue
 />

【问题讨论】：

我猜你需要使用自己的handleChange 方法或适应现有的

【参考方案1】：

我像这样解决这个问题

<DatePicker
   name='joinedAt'
   value=values['joinedAt']
   onChange=e => setFieldValue('joinedAt', e)
/>

2020-03-08 更新：

您可以在 setFieldValue 的第二个道具上使用e.target.value，具体取决于您的自定义输入设计。感谢布兰登。

【讨论】：

我试过了，但它无法识别所选日期

onChange=e => setFieldValue('joinedAt', e.target.value)

【参考方案2】：

如果你有更深的嵌套，你应该使用 Formik Field。 示例：

<Formik
    validationSchema=schema
    initialValues=initialValues
    onSubmit=(values, actions) => 
>

  <Field name="colors" component=ColorsEditor  colors=colorArray/>
</Formik>


const ColorsEditor = ( field, colors, form, ...props ) => 

    return (
        <div>
            <Button onClick=() => form.setFieldValue('colors', "myValue")>
            </Button>
        </div>
    )

因此，Field 组件已经包含了表单，其中包含您可以在需要的地方使用的 setFieldValue。它还包括错误和其他自定义所需的字段。

【参考方案3】：

对于 html 原始输入字段，handleChange 就像一个魅力，但对于自定义组件，您必须使用 setFieldValue 来强制更改值。

onChange=e => setFieldValue('joinedAt', e)

【参考方案4】：

接受的答案对我不起作用，也没有显示所选日期。已经快一年了，所以实施可能会有一些变化。虽然这可以通过像这样使用toDateString() 来解决

<DatePicker
   name='joinedAt'
   value=values['joinedAt']
   onChange=e => setFieldValue('joinedAt', e.toDateString())
 />

【参考方案5】：

Formik 的解决方案是useField() 方法。您可能需要为 DatePicker 等您可能没有源代码访问权限的组件创建一个包装器。

documentation 提供了一个例子：

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

简而言之，该方法接受描述字段的自定义道具。然后您可以在自定义字段中展开分配的字段值和道具。

【参考方案6】：

https://github.com/jaredpalmer/formik/issues/692

如果您使用 setFieldValue 方法，则需要手动设置值

【讨论】：

他正在使用来自 props 的 setFieldValue