MUI选择事件重新运行到未定义

Question

我使用MUI创建了一个表单，其中我使用了一个不能按预期工作的Select组件，我的状态：

const [formdata, setformdata] = useState({});

我的事件处理程序：

const onchangehandle = (e) => {
setformdata((prevState) => ({
...prevState,
[e.target.name]: e.target.value,
}));

}；

我的选择组件：

<Select
name="year"
placeholder="Select year..."
value={formdata.year}
onChange={onchangehandle}
>
<Option value="I">I</Option>
<Option value="II">II</Option>
<Option value="III">III</Option>
<Option value="IV">IV</Option>
</Select>

select不返回任何值感谢您的帮助。

Answer 1

在Select组件的示例代码中，newValue被设置为onChange事件的第二个参数。因此，您需要更改两个Select组件的onChange函数处理程序，如下所示：

// for select year
onChange={(e, newValue) =>
handleChange({
target: {
value: newValue,
name: "year"
}
})
}
// for select gender
onChange={(e, newValue) =>
handleChange({
target: {
value: newValue,
name: "gender"
}
})
}

你可以看看这个沙箱，看看这个解决方案的实际工作示例。