javascript - 从反应选择列表中选择选项时，Formik 表单返回 TypeError

Question

react-select从多选列表中选择一个选项时，我的 formik 表单返回一个 TypeError

在里面<Formik>，我将 Field 渲染如下：

<Field name="type" id="type" as={MultiSelectComponent} options={Types} placeholder="Select Type" />

这是我的MultiSelectComponent：

export const MultiSelectComponent = (props) => {

    return (<Select
        isMulti
        className="basic-multi-select"
        classNamePrefix="select"
        {...props}
    />)
};

该props参数只给我这些道具，但没有form或field道具。

每当我单击一个选项时，我都会收到此错误：

TypeError: Cannot read property 'type' of undefined

Answer 1

我找到了解决方案

我通过这样做将 setFieldValue 函数道具从formik我的自定义组件传递给了我的自定义组件：

<Formik 
  ....
>
  {({ isSubmitting, errors, touched, setFieldValue }) => (
  <Form>
    .....
    .....
    <Field
        name="type"
        id="type"
        as={MultiSelectComponent}
        options={Types}
        setFieldValue={setFieldValue}
        placeholder="Select Type"
    />
 </Form>
</Formik>

然后 ：

export const MultiSelectComponent = ({ options, name, setFieldValue }) => {

    return (<Select
        isMulti
        className="basic-multi-select"
        classNamePrefix="select"
        options={options}
        onChange={evt =>
            setFieldValue(
                name,
                evt.map(option => option.value)
            )
        }
    />)
};