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的新值时（card，ex）的输入被阻止了

Answer 1

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

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

loop

Answer 2

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

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

因此，您需要在setFormData

中捕获这些情况

Answer 3

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

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

3 个答案: