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

Question

我正在尝试在Formik中使用DatePicker.但是,当我单击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

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