React 中状态的 onChange 对象

Question

我想在检查输入后在对象中添加一个新状态。项目状态是一个对象，里面有另一个对象

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

更改系列，按值输入的模型是显而易见的，但如何更改插件中的对象？我不能这样做

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