Reactjs 和 Javascript：如何将嵌套对象映射到输入字段答案

【问题标题】：Reactjs and Javascript: how to map a nested object to input fieldReactjs 和 Javascript：如何将嵌套对象映射到输入字段
【发布时间】：2021-04-22 14:49:46
【问题描述】：

我需要一些帮助。我是 Reactjs 的新手，我正在尝试将嵌套对象映射到输入字段，因此当用户键入内容时，它将映射到嵌套对象字段名称。

这是我要访问的数据。

const [details, setDetails] = useState(
    {
        firstName: '',
        lastName: "", 
        email: '', 
        dataOfBirth: '', 
        phoneNum: '',
        employeeAddress:
            {
                street: '',
                city: '',
                state: '',
                zipcode: 0
            }
    })

输入字段表单我尝试了下面的代码，但它不起作用

<div className="form-group">
     <label htmlFor="" className="street">Street</label>
     <input type="text" name="street" id="street"
            onChange={e => setDetails({...details.employeeAddress, street: e.target.value})}
            value={details.employeeAddress.state}
      />
</div>

下面的代码可以工作，因为它没有嵌套在对象中。

<div className="form-group">
     <label htmlFor="" className="firstName">First Name</label>
     <input type="text" name="firstName" id="firstName"
            onChange={e => setDetails({...details, firstName: e.target.value})}
            value={details.firstName}
     />
</div>

【问题讨论】：

您正在设置街道但将状态分配为值？

标签： javascript reactjs

【解决方案1】：

您还需要像这样传播employeeAddress 对象

onChange={e => setDetails({ ...details, employeeAddress: { ...details.employeeAddress, firstName: e.target.value } })}

【讨论】：

【解决方案2】：

const updateEmployeeAddress = e => {
    setDetails({
        ...details, 
        employeeAddress: { 
            ...details.employeeAddress, 
            [e.target.name]: e.target.value
        }
    })         
}

<div className="form-group">
     <label htmlFor="" className="street">Street</label>
     <input 
         type="text" 
         name="street" 
         id="street"
         onChange={updateEmployeeAddress}
         value={details.employeeAddress.street}
      />
</div>

【讨论】：