Material UI结合Formik实现带联动规则多选框组的最优方案咨询

完全可以直接将复选框状态全部交给Formik管理，无需额外维护独立的useState状态，调整步骤如下：

步骤1：调整Formik初始值 #

首先在initialValues中新增4个测量复选框、多选组jobType的初始字段：

const initialValues = {
  // 原有字段保留：jobName、stage、measurement、measurement_unit、jobRate、serviceRate
  nos: false,
  length: false,
  breadth: false,
  height: false,
  jobType: [] // 多选组用数组存储选中值
};

步骤2：封装统一的联动处理函数 #

替换原来4个独立的状态处理函数，直接操作Formik的内置方法更新状态：

const handleMeasurementCheck = (fieldName) => {
  const newChecked = !formik.values[fieldName];
  switch(fieldName) {
    case 'height':
      // 勾选Height同步选中所有测量项
      formik.setValues({
        ...formik.values,
        nos: newChecked,
        length: newChecked,
        breadth: newChecked,
        height: newChecked
      });
      break;
    case 'breadth':
      // 勾选Breadth同步选中除Height外的所有测量项
      formik.setValues({
        ...formik.values,
        nos: newChecked,
        length: newChecked,
        breadth: newChecked
      });
      break;
    case 'length':
      // 勾选Length同步选中Nos和Length
      formik.setValues({
        ...formik.values,
        nos: newChecked,
        length: newChecked
      });
      break;
    case 'nos':
      // Nos单独更新
      formik.setFieldValue('nos', newChecked);
      break;
    default:
      break;
  }
};

步骤3：修改复选框绑定逻辑 #

删除原来绑定自定义state的逻辑，改为绑定Formik管理的状态：

测量多选组调整 #

<FormGroup row>
  <FormControlLabel 
    control={<CheckBox 
      checked={formik.values.nos} 
      onChange={() => handleMeasurementCheck('nos')} 
      name="nos" 
      id="1"
    />} 
    label="Nos" 
  />
  <FormControlLabel 
    control={<CheckBox 
      checked={formik.values.length} 
      onChange={() => handleMeasurementCheck('length')}  
      name="length" 
      id="2"
    />} 
    label="Length" 
    style={{marginLeft: "15px"}}
  />
  <FormControlLabel 
    control={<CheckBox 
      checked={formik.values.breadth} 
      onChange={() => handleMeasurementCheck('breadth')}  
      name="breadth" 
      id="3"
    />} 
    label="Breadth" 
    style={{marginLeft: "15px"}}
  />
  <FormControlLabel 
    control={<CheckBox 
      checked={formik.values.height} 
      onChange={() => handleMeasurementCheck('height')} 
      name="height" 
      id="4"
    />} 
    label="Height" 
    style={{marginLeft: "15px"}}
  /> 
</FormGroup>

工作类型多选组调整（可选优化） #

原来的jobType多选组也可以同步绑定到Formik，无需额外处理：

<FormGroup row>
  <FormControlLabel 
    control={<CheckBox 
      name="jobType" 
      value="Residential"
      checked={formik.values.jobType.includes('Residential')}
      onChange={(e) => {
        const val = e.target.value;
        const newJobType = e.target.checked 
          ? [...formik.values.jobType, val]
          : formik.values.jobType.filter(item => item !== val);
        formik.setFieldValue('jobType', newJobType);
      }}
    />} 
    label="Residential"
  />
  <FormControlLabel 
    control={<CheckBox 
      name="jobType" 
      value="Commercial"
      checked={formik.values.jobType.includes('Commercial')}
      onChange={(e) => {
        const val = e.target.value;
        const newJobType = e.target.checked 
          ? [...formik.values.jobType, val]
          : formik.values.jobType.filter(item => item !== val);
        formik.setFieldValue('jobType', newJobType);
      }}
    />} 
    label="Commercial"
  />
  <FormControlLabel 
    control={<CheckBox 
      name="jobType" 
      value="Infrastructure"
      checked={formik.values.jobType.includes('Infrastructure')}
      onChange={(e) => {
        const val = e.target.value;
        const newJobType = e.target.checked 
          ? [...formik.values.jobType, val]
          : formik.values.jobType.filter(item => item !== val);
        formik.setFieldValue('jobType', newJobType);
      }}
    />} 
    label="Infrastructure"
  />
</FormGroup>

调整完成后，所有复选框的状态都会统一由Formik管理，提交时所有值都会自动包含在onSubmit回调的values参数中，可直接传递给API，无需做额外的状态同步处理。

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