onChange object in state in React

Question

我想在檢查輸入后在 object 中添加一個新的 state 。 項目 state 是一個 object，里面有另一個 object

const [item, setItem] = useState({
    series: '',
    model: '',
    addons: {
      gps: false,
      wifi: false,
      esim: false,
    },
    price: ''
})

更改系列，model 按值輸入很明顯，但是如何更改插件中的對象？ 我不能這樣做

onChange={(e) => setItem({ ...item, gps: e.target.checked })}

或者

onChange={(e) => setItem({ ...item, addons.gps: e.target.checked })}

代碼：

import React, {useState} from "react";
import "./style.css";

export default function App() {
  const [item, setItem] = useState({
    series: '',
    model: '',
    addons: {
      gps: false,
      wifi: false,
      esim: false,
    },
    price: ''
  })


  const sendItem = () => {
    console.log(item, 'add item')
  }
  
  return (
    <div>
      <form onSubmit={sendItem}>
      <div>
       <label htmlFor="series">Series:</label>
              <input
                name="series"
                label="series"
                type="text"
                value={item.series}
                onChange={(e) => setItem({ ...item, series: e.target.value })}
              />
        </div>
        <div>
       <label htmlFor="model">Model:</label>
              <input
                name="model"
                label="model"
                type="text"
                value={item.model}
                onChange={(e) => setItem({ ...item, model: e.target.value })}
              />
        </div>
        <div style={{display: 'flex', flexDirection: 'row', justifyContect: 'center', alignItems: 'center'}}>
       <label htmlFor="addons">Addons:</label>
       <p>GPS:</p>
              <input
                name="gps"
                type="checkbox"
                onChange={(e) => setItem({ ...item, gps: e.target.checked })}
              />
        <p>Wifi:</p>
              <input
                name="wifi"
                type="checkbox"
                onChange={(e) => setItem({ ...item, wifi: e.target.checked })}
              />
         <p>Esim:</p>
              <input
                name="esim"
                type="checkbox"
                onChange={(e) => setItem({ ...item, esim: e.target.checked })}
              />
        </div>
         <div>
       <label htmlFor="price">Price:</label>
              <input
                name="price"
                label="price"
                type="text"
                value={item.price}
                onChange={(e) => setItem({ ...item, price: e.target.value })}
              />
        </div>


        <button type="submit">Send</button>
      </form>
    </div>
  );
}

Answer 1

setItem({ ...item, addons: {...item.addons, gps: e.target.checked} })

您可以同時傳播item和addons ，允許您只更新需要更改的addons的屬性。