使用react-select不更新状态来反应多步表单

如何解决使用react-select不更新状态来反应多步表单

我正在使用 React 创建一个多步骤表单，其中一个步骤使用 react-select。

父组件具有以下更改处理程序：

const handleChange = input => e => {
    setFormData({ ...formData,[input]: e.target.value});
  }

它适用于我的大多数字段和步骤，但由于 react-select 返回一个对象，这似乎不适用于 react-select。所以我在父组件中写了一个单独的处理程序如下：

const handleSelectChange = e => {
    setFormData({ ...formData,[input]: e });
  } 

在 Select 组件中，我有以下内容：

<Select
   defaultValue={values.purpose}
   name="purpose"
   options={purpoSEOptions}
   className="basic-single"
   classNamePrefix="select"
   onChange={handleSelectChange('purpose')}
/>

但是我收到了“handleSelectChange”不是函数的错误消息。我尝试将处理程序代码更改为：

const handleSelectChange = e => {
        setFormData({ ...formData,purpose: e });
      } 

并删除 Select 组件中的括号，所以 onChange 现在显示为：

onChange={handleSelectChange}

这已经消除了错误，但现在 stateField 没有使用选择中的值更新。

任何建议将不胜感激。

解决方法

将 onChange={handleSelectChange('purpose')} 更改为

onChange={() => handleSelectChange('purpose')}