即使在 React 中选中，复选框也总是传递 false

Question

我有一个复选框，当它被选中/取消选中时，它会在控制台中写入 true 或 false，但是，当我尝试保存值时，它总是传递 false。

html:

<input type="checkbox" 
       name="Status"
       value="Status"
       onChange={(e) => {carStatus(e)}) />

const CarState = {
      carId: 0,
      Make: "",
      Model: ""
      Active: ""   //this is a bit in the DB
}

const [carMake, setCarMake] = useState(CarState);
const [carModel, setCarModel] = useState(CarState);
const [carActive, setActive] = useState(CarState);

const carStatus = (e) => {
   const status = e.target.checked;
   if(status)
   {
      console.log("checked " + status);
      setCarActive({ ...carActive, status});
   }
   else
   {  
      console.log("checked" + status);
      setCarActive({ ...carActive, status});
   }

const saveCar = () => {
       var data = {
          make: carMake.CarMake,
          model: carModel.Model,
          active: saleActive.Active  //always false even if checkbox is checked
      };
  
     //passes data to the API

}

有没有更好的方法或不同的方法？如果复选框被选中，我可以在 F12 中看到真/假，但是，当我单击保存按钮 [saveCar 功能] 时，只会传递假

Answer 1

做这样的事情

<input 
type="checkbox" 
name="Status"
checked={carActive.Active === true}
onChange={(e) => setActive(state=>({...Active:e.target.checked}))) />

Answer 2

您没有更新嵌套的Active 状态，而是添加了status 属性并且没有引用它。使用checked 值并更新状态中的Active 属性。

const [carActive, setCarActive] = useState(CarState);

...

const carStatus = (e) => {
  const { checked } = e.target;

  console.log("checked " + checked);

  setCarActive(carActive => ({
    ...carActive,    // <-- shallow copy previous state
    Active: checked, // <-- set new Active checked value
  }));
}

在输入中，您应该引用状态。使用checked prop/attribute/

<input
  type="checkbox" 
  name="Status"
  value="Status"
  checked={carActive.Active} // <-- set the checked prop of input
  onChange={carStatus}
/>

在saveCar 中引用正在更新的正确状态。确保所有被访问的属性都与carState 属性匹配。

const saveCar = () => {
  var data = {
    make: carMake.Make,
    model: carModel.Model,
    active: carActive.Active 
  };
  
  //passes data to the API

}

工作演示