将 react-select 与 formik 一起使用时无法读取未定义的 属性 'type'

Question

我正在使用 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>
    })
/>

它抛出一个错误Cannot read property 'type' of undefined

如何解决这个问题并在 formik 中处理 react-select？

Answer 1

React-Select的onChange第一个参数是一个选项值，而formik的handleChange第一个参数是一个事件

React-Select: onChange(value, action) => void
Formik: handleChange(e: React.ChangeEvent<any>) => void

这就是您收到此类错误的原因。

这是我的方法。希望对你有帮助。

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>
  );
}