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

【问题标题】：React multi-step form using react-select not updating state使用 react-select 反应多步表单不更新状态
【发布时间】：2021-04-16 08:16:29
【问题描述】：

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

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

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

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

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 没有使用来自选择的值进行更新。

任何建议将不胜感激。

【问题讨论】：

标签： reactjs onchange react-select multi-step

【解决方案1】：

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

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

【讨论】：

感谢您的建议，我已经尝试过了，但不幸的是它带回了“handleSelectChange 不是函数错误”。您对此有何想法？