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

IT技术 reactjs react-native material-ui formik
2021-05-25 08:52:18

我正在尝试在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>
            )
        }}
    />
)

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

所以我像下面一样尝试，但它不起作用。 

 ...setFieldValue

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

我解决这个问题 

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

2020-03-08 更新：

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

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

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

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

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

<DatePicker
   name={'joinedAt'}
   value={values['joinedAt']}
   onChange={e => setFieldValue('joinedAt', e.toDateString())}
 />
其它你可能感兴趣的问题
上一篇我需要更改什么设置才能消除外壳和内部之间的间隙？ 下一篇带有 Pronterface UI 的 Cura 停止打印