reactjs - 即使在 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 中看到 true/false，但是，当我单击保存按钮 [saveCar 函数] 时，只会传递 false

Answer 1

您没有更新嵌套的 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

}

工作演示