Reactjs 和 Javascript：如何將 map 嵌套到輸入字段 ZA8CFDE6331BD59EB2AC96F8911C4B6666

Question

我需要一些幫助。 I am new to Reactjs and I am trying to map nested object to an input filed so when the user type something it will be map to the nested object field name.

這是我試圖訪問的數據。

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>

下面的代碼示例可以工作，因為它沒有嵌套在 object 中。

<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>

Answer 1

您還需要像這樣傳播employeeAddress object

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

Answer 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>