问题描述
我在最近的项目中遇到了一个问题，其中我有一个表单，其中包含基本的用户详细信息，如First Name、Last Name、Email、Mobile No、OTP。这些字段是我在react-hook中创建的状态。
现在，我必须编写一个handleInputChange函数，该函数将接受两个参数作为输入，并更新该字段的相应状态值。
另外，如果在我的handleInputChange中设置状态之前也必须触发validation函数，那么如何实现它。
请向我推荐optimal解决方案，以便将来如果我的UI中有10+个字段，如何动态更新它们的状态。
下面的代码片段属于我的Class-based组件，类似于我希望通过functional组件中的React-Hooks实现的行为。
初始状态声明：
this.state = {
name: { value: "", error: "" },
city: { value: "", error: "" },
email: { value: "", error: "" },
contact_number: { value: "", error: "" },
otp_data: {}
};
我的handleInputChange函数：
handleInputChange = (name, value) => {
let label = "";
this.setState({
[label]: {
...this.state[label],
value: value,
error: validateFields(label, value)
}
});
};
推荐答案
始终建议为每个变量创建单独的状态。在功能组件中，可以使用useState，如下所示
const [name, setName] = useState({ value: "", error: "" });
const [city, setCity] = useState({ value: "", error: "" });
const [email, setEmail] = useState({ value: "", error: "" });
const [contact_number, setContactNumber] = useState({ value: "", error: "" });
const [otp_data, setOtpData] = useState({ value: "", error: "" });
// Mapping of label with state changer
const labelStateMap = {
name: setName,
city: setCity,
email: setEmail,
contact_number: setContactNumber,
otp_data: setOtpData
}
handleInputChange = (label, value) => {
const stateChanger = labelStateMap[label];
if(stateChanger){
stateChanger({
value,
error: validateFields(label, value)
})
}
};