使用带有formik的react-select时无法读取未定义的属性“类型”

Posted 2023-02-23

【中文标题】使用带有formik的react-select时无法读取未定义的属性“类型”

【英文标题】：Cannot read property 'type' of undefined while using react-select with formik

【发布时间】：2019-01-02 06:35:51

【问题描述】：

我正在使用 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？

【参考方案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>
  );

【讨论】：

你领先我几秒。欢迎来到***