时间戳

首页 > 解决方案 > Reactjs 和 Javascript：如何将嵌套对象映射到输入字段

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

问题描述

我需要一些帮助。我是 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>

标签： javascriptreactjs

解决方案

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

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

推荐阅读