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

【问题标题】：Unable to change value in input onChange in React JS无法在 React JS 中更改输入 onChange 中的值
【发布时间】：2020-05-22 09:08:09
【问题描述】：

以下是处理输入值变化的示例代码

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

所以对于这个示例代码我能够更改姓名和年龄值但是 card 和 exp 的值我不能改变值，为什么？？

当我想为卡添加新值时以及当我想添加新的 exp 值时 (card, ex) 的输入被阻塞了

【问题讨论】：

标签： javascript reactjs react-native react-hooks

【解决方案1】：

很正常，exp和card值不在你对象的最上面，而是在一个子对象账户中。

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

function handleChange2 (evt) {

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

【讨论】：

首先谢谢，这个解决方案有效，但他们的姓名和年龄被阻止更改
您必须仅对 acc 和 exp 字段使用 handleChange2
function handleChange1 (evt) { setFormData({ ...formData, account : { ...formData.account, [evt.target.name]:evt.target.value } , [evt.target.name]:evt.target.value }); } 我改变了这样的功能并且对两者都很好
您必须使用 handleChange1 作为 name 和 age 字段，并使用新的 handleChange2 作为 card 和 exp 字段

【解决方案2】：

您缺少对account 的嵌套。 name 和 age 是“直接”状态变量，但 card 和 exp 属于 account，因此没有正确设置

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

因此，您需要在 setFormData 中捕获这些案例

【讨论】：

【解决方案3】：

基本上，您在设置状态时不会复制嵌套对象的值。我建议你重写这个，如下所示：Updating an object with setState in React 使用“更新嵌套状态对象”部分。

【讨论】：