使用Redux提交表单时无法上传Checkbox与Radio按钮值，需如何修改

需调整的核心代码点 #

你当前的问题由三处逻辑缺失导致：单选框未设置value属性、复选框未绑定事件和属性、通用变更处理逻辑未适配多选场景，按以下步骤修改即可：

1. 调整单选框（Radio）代码 #

给两个性别单选框补充value属性，同时修正label的htmlFor与对应input的id匹配：

<div className="mb-3">
  <label  className="mb-2 fw-bold">Gender</label>
  <div className="form-check">
    <input className="form-check-input" type="radio" name="gender" id="male" value="male" onChange={handleChnage}/>
    <label className="form-check-label" htmlFor="male" >Male</label>
  </div>
  <div className="form-check">
    <input className="form-check-input" type="radio" name="gender"  id="female" value="female" onChange={handleChnage}/>
    <label className="form-check-label" htmlFor="female">Female</label>
  </div>
</div>

2. 调整复选框（Checkbox）代码 #

给所有复选框补充name、value属性，绑定onChange事件，同时修正重复id问题：

<div className="mb-3">
  <label  className="mb-2 fw-bold">Checkbox Value</label>
  <div className="form-check">
    <input className="form-check-input" type="checkbox" name="checking" value="Javascript" id="js" onChange={handleChnage}/>
    <label className="form-check-label" htmlFor="js">Javascript</label>
  </div>
  <div className="form-check">
    <input className="form-check-input" type="checkbox" name="checking" value="React JS" id="react" onChange={handleChnage}/>
    <label className="form-check-label" htmlFor="react">React JS</label>
  </div>
  <div className="form-check">
    <input className="form-check-input" type="checkbox" name="checking" value="HTML" id="html" onChange={handleChnage}/>
    <label className="form-check-label" htmlFor="html">HTML</label>
  </div>
  <div className="form-check">
    <input className="form-check-input" type="checkbox" name="checking" value="CSS" id="css" onChange={handleChnage}/>
    <label className="form-check-label" htmlFor="css">CSS</label>
  </div>
</div>

3. 重写通用变更处理逻辑 #

根据表单控件类型区分处理逻辑，适配多选场景：

const handleChnage=(e)=>{
  const { name, value, type, checked } = e.target;
  if(type === 'checkbox'){
    // 复选框逻辑：选中时加入数组，取消选中时从数组移除
    setdata(prev => {
      if(checked){
        return {...prev, [name]: [...prev[name], value]}
      }else{
        return {...prev, [name]: prev[name].filter(item => item !== value)}
      }
    })
  }else{
    // 输入框、下拉、单选框直接赋值即可
    setdata(prev => ({...prev,[name]:value}));
  }
}

可选优化：手机号输入框重复定义了两个name属性，可删掉多余的name="phone"避免冗余。

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