使用 useState 将 React 表单数据存储在嵌套对象中

Question

我正在使用 React 构建一个表单，我想将表单字段存储在一个具有嵌套数据的对象中，如下所示：

{
  name: "Test User",
  email: "test@example.com.com",
  address: {
    street: "123 Main St",
    city: "New York",
    state: "NY"
  }
}

嵌套的address 是我遇到的问题。

我的代码如下所示：

const [booking, setBooking] = React.useState({ address: {} });

  const handleChange = e => {
    const { name, value } = e.target;
    setBooking(prevState => ({
        ...prevState,
        [name]: value
    }));
  };

return (
  <form onSubmit={handleSubmit}>
    <label>Name</label><input type="text" name="name" value={booking.name} onChange={handleChange} />
    <label>Email</label><input type="text" name="email" value={booking.email} onChange={handleChange} />
    <label>Street Address</label><input type="text" name="address.street" value={booking.address.street} onChange={handleChange} />
    <label>City</label><input type="text" name="address.city" value={booking.address.city} onChange={handleChange} />
    <label>State</label><input type="text" name="address.state" value={booking.address.state} onChange={handleChange} />
    <button type="submit">Create booking</button><br /><br />
  </form>
)

但是使用这种方法，地址值不会被嵌套。例如，对于街道地址字段，booking 以 address.street 的键结束，而不是使用嵌套的 address 对象。

如何将表单数据存储在嵌套对象中？

Answer 1

您需要创建两个 onchange 事件函数，一个用于预订，另一个用于地址

  const [booking, setBooking] = React.useState([]);
  const [addressDetails, setAddressDetails] = useState([])

  function handleChange(e) {
    setBooking(prevState => ({
      ...prevState,
    
      ...prevState.raw,
      [e.target.name]: e.target.value,}
    ))
  }

函数handleChangeAddress(e) {

  setAddressDetails(prevState => ({
  ...prevState,
  Address: {
    ...prevState.Address,
    [e.target.name]: e.target.value,
  },
}))

  setBooking(prevState => ({
  ...prevState,
  ...prevState.store,
  Address:addressDetails.Address
  
}))

}