Question

我正在尝试在DatePicker中使用Formik。但是，当我单击DatePicker的日期时，其窗体值不会更改。相反，我收到此错误：

未捕获的TypeError：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}
 />

Answer 1

我像

这样解决

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

Answer 2

对于html原始输入字段，handleChange就像一个超级按钮一样工作，但是对于自定义组件，您必须使用setFieldValue强制更改该值。

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

Answer 3

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

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

Answer 4

如果您有更深的嵌套，则应使用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。它还包括错误和其他自定义所需的字段。

Answer 5

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

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

Answer 6

您也可以通过这种方式使用它；

onChange={e => handleChange('joinedAt')(e.target.value)}

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

6 个答案: