即使在 React 中选中，复选框也始终传递 false

Question

我有一个复选框，当它为 checked/unchecked 时，它会在控制台中写入 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 function]

时，只会传递 false

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

}

即使在 React 中选中，复选框也始终传递 false

Checkbox always passing false even if checked in React

reactjs

react-native

react-hooks

use-state

工作演示