问题描述
我正在使用 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
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')}