使用React开发表单，填完所有值仍无法启用提交按钮如何解决

问题根因 #

• 表单状态更新与校验时机错位：handleChnage中先执行validate校验旧数据，再更新data状态，导致校验结果永远滞后一步
• 单选、复选框状态未同步到data：性别单选、技能复选框的选中状态单独存在radio、checkBoxes两个状态里，但validate校验时只读取data中的gender、checking字段，操作单选/复选框后没有同步更新data，导致data中的这两个字段永远是空数组，校验始终不通过
• 校验逻辑有遗漏：validate函数没有对gender字段的非空校验，且对数组类型字段判断逻辑错误（空数组不等于空字符串）
• 提交按钮属性重复：同一个提交按钮写了两个onClick属性，会导致事件执行异常

修复方案 #

1. 调整普通输入框的更新与校验顺序 #

你已经写了监听data变化的useEffect自动触发校验，删掉手动调用的validate即可：

const handleChnage = (e) => {
  setdata({ ...data, [e.target.name]: e.target.value });
}

2. 单选、复选框操作时同步更新data #

修改handleGenderChange和handleCheckChnage，更新选中状态的同时同步到data：

const handleCheckChnage =(e) =>{
  const allCheckBoxes = [...checkBoxes]
  const selectedValue = e.target.value
  allCheckBoxes.forEach(cbox=>{
    if(cbox.name === selectedValue){
      cbox.isChecked = !cbox.isChecked
    }
  })
  setcheckBoxes(allCheckBoxes)
  // 同步更新data的checking字段
  const newChecking = allCheckBoxes.filter(item => item.isChecked).map(item => item.name)
  setdata(prev => ({...prev, checking: newChecking}))
}

const handleGenderChange =(e) =>{
  const newRadio =[...radio]
  const selectedGender = e.target.value
  newRadio.forEach((rf)=>{
    rf.isChecked = rf.name === selectedGender;
  });
  setradio(newRadio);
  // 同步更新data的gender字段
  setdata(prev => ({...prev, gender: [selectedGender]}))
}

3. 修正validate校验逻辑 #

补全数组类型字段的判断：

const validate = () =>{
  let valid = true
  const newUser = {...data}
  for(let a in newUser){
    if(Array.isArray(newUser[a])){
      // 数组类型判断长度
      if(newUser[a].length === 0){
        valid = false
        break
      }
    }else{
      // 普通值判断是否为空
      if(newUser[a].trim() === ""){
        valid = false
        break
      }
    }
  }
  setisInvalid(!valid)
}

确认监听data的useEffect正常触发校验：

useEffect(()=>{
  validate()
},[data])

4. 修正提交按钮的重复onClick属性 #

删掉重复的onClick={closeModal}，如果需要提交后关闭弹窗，放到handleSubmit最后执行即可：

<button 
  type="button" 
  className="btn btn-primary" 
  disabled={isInvalid} 
  onClick={handleSubmit}
>
  Add User
</button>

const handleSubmit = (e) => {
  e.preventDefault();
  // 原有提交逻辑不变
  dispatch(allActions.createData(data));
  // 提交完成后关闭弹窗
  closeModal()
}

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