如何在React中将自定义输入与Formik一起使用? [英] How to use custom Input with Formik in React?

问题描述

我正在尝试在 DatePicker github.com/jaredpalmer/formik/"rel =" noreferrer> Formik .但是，当我单击DatePicker的日期时，其窗体值不会更改.相反，我收到此错误:

I'm trying to use DatePicker within Formik. But when I click DatePicker's date its form value is not changed. Instead, I got this error:

未捕获的TypeError:e.persist不是函数 在Formik._this.handleChange(formik.es6.js:5960)

Uncaught TypeError: e.persist is not a function at Formik._this.handleChange (formik.es6.js:5960)

我简化代码，代码在下面

I shortify code, the code is below

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

我搜索了几个文档， https://github.com/jaredpalmer/formik/issues/187 和 https://github.com/jaredpalmer/formik/issues/86

I googled few documents, https://github.com/jaredpalmer/formik/issues/187 and https://github.com/jaredpalmer/formik/issues/86

所以我尝试了如下操作，但是没有用.

So I tried like below, but it's not working.

 ...setFieldValue

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

推荐答案

我像

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

于2020-03-08更新:

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

You can use e.target.value on setFieldValue's second prop, depends on your custom input design. Thanks to Brandon.

这篇关于如何在React中将自定义输入与Formik一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！