React函数组件中Checkbox状态更新与下拉框显隐问题求助

你的核心问题是重复维护状态且未同步：你同时声明了独立的recursive/recursiveType状态，以及formState里对应的字段，但Checkbox的onChange只更新了独立的recursive，而下拉框的显隐判断依赖的是formState.recursive——这就导致formState里的recursive始终是初始的false，下拉框自然不会切换显隐。

另外recursiveType也存在同样的问题：select的onChange更新独立状态，但value绑定的是formState.recursiveType，会导致选择值和表单状态不同步，提交数据也会出问题。

修复步骤： #

1. 删除独立的状态变量：去掉const [recursive, setRecursive]和const [recursiveType, setRecursiveType]，所有表单状态统一用formState管理。
2. 更新Checkbox的onChange逻辑：直接修改formState里的recursive字段。
3. 更新Select的onChange逻辑：同样修改formState里的recursiveType字段。
4. 提交时统一从formState取值：确保所有数据都来自同一个状态源。

修改后的完整代码： #

状态与提交函数部分：

// 移除独立的recursive和recursiveType状态
const [formState, setFormState] = useState({
    title: "",
    trainingDesc: "",
    category: "",
    trainingOn:"",
    recursive:false,
    recursiveType:""
});

const addTraining = (e) => {
    e.preventDefault();
    if (!editMode) {
        const trainingObj = {
            id: uuid(),
            title: formState.title,
            trainingDesc: formState.trainingDesc,
            category: formState.category,
            trainingOn: trainingDate,
            recursive: formState.recursive ? 1 : 0,
            recursiveType: formState.recursiveType, // 从formState取值
            dateTime: new Date().getTime()
        }
        dispatchRedux(createTraining(trainingObj));
    }
    else {
        dispatchRedux(updateTraining(formState, id));
    }
    navigate('/trainings');
}

表单部分：

<form onSubmit={addTraining}>
  {/* 其他表单字段 */}
  <label htmlFor="recursive">Recursive</label> &nbsp;
  <input 
    type="checkbox" 
    name="recursive" 
    id="recursive" 
    checked={formState.recursive} 
    onChange={() => setFormState(prev => ({...prev, recursive: !prev.recursive}))} 
  />
  {formState.recursive && (
    <div className="col-4 form-group" style={{marginLeft:'-16px'}}>
      <label htmlFor="recursiveType">Recursive Type</label>
      <select 
        name="recursiveType" 
        onChange={(e) => setFormState(prev => ({...prev, recursiveType: e.target.value}))} 
        value={formState.recursiveType} 
        className="form-control" 
        id="recursiveType" {/* 修正id与label的htmlFor匹配问题 */}
        required
      >
        <option value="">Select</option>
        <option value="daily">Daily</option>
        <option value="weekly">Weekly</option>
        <option value="monthly">Monthly</option>
      </select>
    </div>
  )}
</form>

额外提示： #

• 注意select的id要和label的htmlFor对应，你之前写的是id="category"，这会导致点击标签无法聚焦select，已经帮你修正。
• 更新对象状态时，必须用展开运算符...prev保留其他字段，避免覆盖丢失原有表单数据。

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