Javascript 如何在React中保持输入值更改时的初始状态？

我有下面的代码，只想更新输入字段上的文本值

import React，{useState}来自“React”；
常数形式=（）=>{
常量初始状态={
姓名：'约翰'，
年龄:25
};
const[{name，age}，setFormState]=useState（initialState）；
常量handleNameChange=（e）=>{
setFormState({
名称：e.target.value
});
};
常量handleAgeChange=（e）=>{
setFormState({
年龄：e.target.value
})
};
返回(
e、 preventDefault（）}>
姓名：
这个人的名字是{name}



年龄：
他/她的年龄是{age}

)
}
导出默认表单在
useState
hook中，属性不会像在类组件中的
setState
函数中那样合并。您必须包含缺少的字段，才能将它们保留在对象中

setFormState({
   name: e.target.value,
   age,
});

而您可以通过在
setFormState
中包含其他属性来修复它，例如：

setFormState({
    name: e.target.value
    age,
});

功能组件不是类组件——如果它们不相关，可以自由地将值分离到单独的变量中。这将使语法更简单：


const Form=（）=>{
const[name，setName]=React.useState（'John'）；
常数[年龄，设置]=反应。使用状态（25）；
常量handleNameChange=（e）=>{
设置名称（如目标值）；
};
常量handleAgeChange=（e）=>{
设定值（如目标值）；
};
返回(
e、 preventDefault（）}>
姓名：
这个人的名字是{name}



年龄：
他/她的年龄是{age}

)
}
render（，document.querySelector（'.react'）

对于分离值，如果有许多状态，那么编写
useState
太多次会很麻烦吗？如果您有大量的值（比如6+），也许-分离状态不会那么枯燥，但在我看来还是更具语义性的。在这一点上，可以自由选择更好的状态，这可能是基于观点的。