[英]Cannot read property 'type' of undefined while using react-select with formik
I'm building a form with an auto filling text box using react-select and formik.我正在使用 react-select 和 formik 构建一个带有自动填充文本框的表单。
<Formik
initialValues={{
assignedTo: task.assignedTo,
}}
onSubmit={(values) => {
const updatedTask = { ...task, ...values };
editTask(updatedTask);
}}
render={({ handleSubmit, handleChange, values }) => (
<form>
<Select type="text" name="assignedTo" options={options} onChange={handleChange} value={{ value: task.assignedTo, label: task.assignedTo }} />
</form>
})
/>
It throws an error Cannot read property 'type' of undefined
它引发错误
Cannot read property 'type' of undefined
How to fix this and handle react-select in formik?如何解决这个问题并在formik中处理react-select?
the first parameter of React-Select's onChange is an option value while the first parameter of formik's handleChange is an event React-Select 的 onChange 的第一个参数是一个选项值,而 formik 的 handleChange 的第一个参数是一个事件
React-Select: onChange(value, action) => void
Formik: handleChange(e: React.ChangeEvent<any>) => void
That is the reason why you received this kind of error.这就是您收到此类错误的原因。
Here is my approach.这是我的方法。 I hope this helps you.
我希望这可以帮助你。
import React from 'react';
import { Formik, Form, Field } from 'formik';
import Select from 'react-select';
function SelectField(FieldProps) {
return (
<Select
options={FieldProps.options}
{...FieldProps.field}
onChange={option => FieldProps.form.setFieldValue(FieldProps.field.name, option)}
/>
)
}
export default function FormikReactSelect(props) {
const options = [
{ value: '1', label: 'White' },
{ value: '2', label: 'Yellow' },
];
return (
<Formik>
{formProps => (
<Form>
<Field name='SelectColor' options={options} component={SelectField}/>
</Form>
)}
</Formik>
);
}
As already stated, onChange handler on React-Select is different from the handleChange handler on formik.如前所述,React-Select 上的 onChange 处理程序与 formik 上的 handleChange 处理程序不同。 I arrived at this from the official formik.org documentation...
我是从官方 formik.org 文档中得出的……
Notice, I don't spread the field values like so {...field}
into the react-select form because that's the problem we're trying to fix.请注意,我不会将像
{...field}
这样的字段值传播到 react-select 表单中,因为这是我们要解决的问题。 The field values contain the onChange handler from formik which we intend to remove.字段值包含我们打算删除的来自 formik 的 onChange 处理程序。
Instead, I only assign the field.name
to the name attribute, and then manually set the value using the setValue
handler provided through the useField helpers.相反,我只将
field.name
分配给 name 属性,然后使用通过 useField 帮助程序提供的setValue
处理程序手动设置值。 This worked for me.这对我有用。
import { useField, Formik } from 'formik';
import Select from 'react-select';
export default function SelectInput(props) {
const [field, meta, helpers] = useField(props);
const options = [
{ value: '1', label: 'White' },
{ value: '2', label: 'Yellow' },
];
return (
<Formik>
<Select
options={options}
onChange={(option) => helpers.setValue(option?.value)}
name={field.name}
placeholder={props.placeholder}
/>
{meta.touched && meta.error ? <div>{meta.error}</div> : null}
</div>
);
}
I had the same error but found a solution我有同样的错误,但找到了解决方案
try this尝试这个
onChange={e => formik.setFieldValue('language', e[0].value)}
.setFieldValue is a Formik method that needs two arguments, first is the field name which's the value you want to update, and second, is the value .setFieldValue是Formik方法,需要两个 arguments,第一个是要更新的值的字段名称,第二个是值
e will be an array with one or multiple selected objects, in my case, there was only one so I accessed the only object using e[0] and then bind the required property from the object, which in my case was e[0].value e将是一个包含一个或多个选定对象的数组,在我的例子中,只有一个,所以我使用e[0]访问了唯一的 object,然后从 object 绑定所需的属性,在我的例子中是e[0] 。价值
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.