无法更改输入中的值在 React JS 中更改

Question

以下是处理输入值更改的示例代码

import React, { useState } from 'react'
function MyName () {
const [ formData, setFormData ] = useState(
{
name:'test',
age:29,
account: {
card:3939939393,
exp:2020
}
}
)
function handleChange1 (evt) {
setFormData({
...formData , [evt.target.name]:evt.target.value
});
}
function handleSubmit1 () {
console.log(formData);

}
return (
<div>
<h1>My name is: {formData.name}</h1>
<h1>My age is: {formData.age}</h1>
<h1>My card is: {formData.account.card}</h1>
<h1>My ex is: {formData.account.exp}</h1>
<input name="name" type="text" value={formData.name} onChange={handleChange1} />
<input name="age" type="text" value={formData.age} onChange={handleChange1} />
<input name="card" type="text" value={formData.account.card} onChange={handleChange1} />
<input name="exp" type="text" value={formData.account.exp} onChange={handleChange1} />

<button onClick={handleSubmit1}>Click</button>

<div>

</div>
</div>
)
}
export default MyName

所以对于此示例代码 我能够更改姓名和年龄值 但是卡和exp值我无法更改值为什么？

当我想添加卡的新价值时 以及当我想添加 exp 的新值时 (卡，EX(的输入被阻止

Answer 1

这是正常的，exp 和 card 值不在对象的顶部，而是在子对象帐户中。

对于这两个字段，您应该使用其他函数

function handleChange2 (evt) {
setFormData({
...formData , account:{
...formData.account,
[evt.target.name]:evt.target.value
}
});
}

Answer 2

你错过了嵌套到account中。name和age是"直接"状态变量，但card和exp属于account，因此未正确设置

setFormData({
...formData , [evt.target.name]:evt.target.value
});

所以你需要在你的setFormData中抓住这些案例

Answer 3

基本上，在设置状态时不会复制嵌套对象值。我建议你重写它，如下所示：在 React 中使用 setState 更新对象 使用"更新嵌套状态对象"部分。