Javascript 使用React钩子中的公共函数设置多个状态

我在最近的项目中遇到了一个问题，我有一个包含基本用户详细信息的表单，如

名字

，

姓氏

，

电子邮件

，

手机号码

，

OTP

。这些字段是我在

react hook

中创建的状态。 现在我必须编写一个

handleInputChange

函数，它将两个参数作为输入，即

（标签、值）

，并更新该字段相应的状态值

此外，如果在我的

handleInputChange

中设置状态之前也必须触发我的

验证

功能，那么如何实现它

请为我推荐

最佳解决方案

，以便将来如果我的UI中有10+个字段，如何动态更新它们的状态

下面的代码片段是我的

基于类的

组件，类似于我希望通过

功能性

组件中的

React Hooks

实现的行为

初次国家声明：

this.state = {
      name: { value: "", error: "" },
      city: { value: "", error: "" },
      email: { value: "", error: "" },
      contact_number: { value: "", error: "" },
      otp_data: {}
    };

My handleInputChange函数：

handleInputChange = (name, value) => {
    let label = "";
    this.setState({
      [label]: {
        ...this.state[label],
        value: value,
        error: validateFields(label, value)
      }
    });
  };

---

<> P>而不是写自己的逻辑，你可以考虑使用它使它更容易为你。< /P> < P>而不是写你自己的逻辑，你可以考虑使用它，这对你来说要容易得多。

< P>当使用Hyff-Hookes来管理组件的状态时，如果它们不互相影响的话，更常见的是分离属性：

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

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

现在，您可以通过访问

name

和

city

来访问state，并使用

setCity（'newyork

）`来更改它们

如果出于任何原因需要将阶段分组，就像在基于类的组件中一样，您可以这样做：

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

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

---

当使用react钩子管理组件的状态时，如果属性之间不会像这样相互影响，则更常见的做法是分离属性：

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

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

现在，您可以通过访问

name

和

city

来访问state，并使用

setCity（'newyork

）`来更改它们

如果出于任何原因需要将阶段分组，就像在基于类的组件中一样，您可以这样做：

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

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

---

使用

useState

hook，您可以执行以下操作

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

const[formData，setFormData]=useState({
名称：{value:，错误：}，
城市：{值：，错误：}，
电子邮件：{value:，错误：}，
联系人号码：{value:，错误：}，
检察官办公室数据：{}，
});

为了应对变化

handleInputChange=（事件）=>{
常量{name，value}=event.target；
setFormData({
…表格数据，
[标签]：{
价值
错误：validateFields（标签、值），
},
});
};

---

handleChange

函数的输入调用钩子返回的

setFormData

函数，并覆盖已更改输入的表单数据。

使用

useState

钩子可以执行类似操作

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

const[formData，setFormData]=useState({
名称：{value:，错误：}，
城市：{值：，错误：}，
电子邮件：{value:，错误：}，
联系人号码：{value:，错误：}，
检察官办公室数据：{}，
});

为了应对变化

handleInputChange=（事件）=>{
常量{name，value}=event.target；
setFormData({
…表格数据，
[标签]：{
价值
错误：validateFields（标签、值），
},
});
};

---

handleChange

函数的输入调用钩子返回的

setFormData

函数，并覆盖已更改输入的表单数据。

始终建议为每个变量创建单独的状态。在functional component中，您可以使用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:}）；
//带状态变换器的标签映射
常量labelStateMap={
名称：setName，
城市：塞特城市，
电子邮件：setEmail，
联系电话：设置联系电话，
otp_数据：setOtpData
}
handleInputChange=（标签、值）=>{
const stateChanger=labelStateMap[label]；
if（状态转换器）{
国家改变者({
价值
错误：validateFields（标签、值）
})
}
};

始终建议为每个变量创建单独的状态。在functional component中，您可以使用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:}）；
//带状态变换器的标签映射
常量labelStateMap={
名称：setName，
城市：塞特城市，
电子邮件：setEmail，
联系电话：设置联系电话，
otp_数据：setOtpData
}
handleInputChange=（标签、值）=>{
const stateChanger=labelStateMap[label]；
if（状态转换器）{
国家改变者({
价值
错误：validateFields（标签、值）
})
}
};

如果您能以a的形式包含一些代码，那将非常有用。如果您能以