使用React Hooks中的公共函数设置多个状态

Question

如何编写一个公共函数handleInputChange，该函数将接受两个或多个参数，并以相同的方式更新状态。

function X(param1 , param2 ,...){}

结果状态：

name: {value: param1 , error: param2}

初始状态声明：

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)
}
});
};

Answer 1

当使用react钩子来管理组件的状态时，如果属性彼此之间不影响，则更常见的是将它们分开：

const [name, setName] = React.useState(`default name, can be left empty`)
const [city, setCity] = React.useState(`default city, can be left empty`)

现在，您可以通过访问name和city来访问状态，并使用setCity('New York(`来更改它们。

如果你出于任何原因需要像在基于类的组件中那样对阶段进行分组，你会这样做：

const [obj, setObj] = React.useState({name: 'Milorad', city: 'Svrljig'})

现在只需将名称更改为setObj(prev => ({...prev, name: 'Ilija'}))，或者在您有键值对的情况下：

const handleInputChange = (key, value) => {
setObj(prev => ({...prev,
[key]: {
...prev[key],
value: value,
error: validateFields(key, value)
})
});
};

Answer 2

建议始终为每个变量创建单独的状态。在功能组件中，您可以使用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)
})
}
};

Answer 3

您可以考虑使用Formik，而不是编写自己的逻辑，这对您来说更容易。

Answer 4

使用useState钩子，您可以执行类似的操作

制作一个状态变量并将其初始化为初始表单数据

const [formData, setFormData] = useState({
name: { value: "", error: "" },
city: { value: "", error: "" },
email: { value: "", error: "" },
contact_number: { value: "", error: "" },
otp_data: {},
});

为了应对变化，

handleInputChange = (event) => {
const { name, value } = event.target;
setFormData({
...formData,
[label]: {
value,
error: validateFields(label, value),
},
});
};

handleChange函数的输入调用钩子返回的setFormData函数，并覆盖已更改输入的表单数据。