React中Checkbox勾选正常但提交时始终传false如何解决

核心错误点 #

• 状态更新的属性名和取值的属性名不匹配：你在carStatus方法里给carActive对象新增的是status属性，但原结构定义以及后续取值用的是Active属性，导致Active一直是初始的空值，转换为布尔值就是false
• 状态定义冗余且逻辑混乱：你定义了3个同结构的状态carMake、carModel、carActive，完全没必要用三个状态分别存车辆的不同属性，统一用一个状态存完整车辆信息即可
• 变量引用错误：saveCar方法里用到的saleActive变量没有定义，属于笔误
• 语法错误：carStatus函数缺少闭合的花括号
• checkbox没有绑定checked属性，会导致状态和视图不同步

正确实现代码 #

简化后的状态定义和逻辑代码 #

// 统一用一个状态存所有车辆相关字段，不要拆分多个同结构状态
const [carInfo, setCarInfo] = useState({
  carId: 0,
  make: "",
  model: "",
  active: false // 对应数据库bit类型，直接用布尔值初始化，不要用空字符串
})

const carStatus = (e) => {
  const checked = e.target.checked
  console.log("checked", checked)
  // 直接更新对应active字段，属性名要和状态定义保持一致
  setCarInfo(prev => ({...prev, active: checked}))
}

const saveCar = () => {
  const data = {
    make: carInfo.make,
    model: carInfo.model,
    active: carInfo.active // 直接从统一状态里取对应字段
  }
  // 后续提交API逻辑
}

修正后的checkbox代码 #

<input 
  type="checkbox" 
  name="Status"
  checked={carInfo.active} // 绑定checked属性保证视图和状态同步
  onChange={carStatus} // 可以直接传函数引用，无需多余的箭头函数包裹
/>

内容的提问来源于stack exchange，提问作者JustWantsToCode