如何简化React多Checkbox的useState代码并实现onChange校验？

1. 合并多个useState为单个对象状态 #

别用5个独立的useState分散管理，直接把所有复选框状态整合到一个对象里，维护起来更简洁：

const [checkboxStates, setCheckboxStates] = useState({
  checkbox1: false,
  checkbox2: false,
  checkbox3: false,
  checkbox4: false,
  checkbox5: false
});

2. 用.map批量渲染复选框——完全可行！ #

先定义一个复选框配置数组，把每个选项的ID、标签、类型（必填/需传递给父组件）统一管理，再通过.map循环渲染，避免重复写冗余的input代码：

const checkboxes = [
  { id: 'checkbox1', label: '必填选项1', type: 'required' },
  { id: 'checkbox2', label: '必填选项2', type: 'required' },
  { id: 'checkbox3', label: '必填选项3', type: 'required' },
  { id: 'checkbox4', label: '需传父组件选项1', type: 'passToParent' },
  { id: 'checkbox5', label: '需传父组件选项2', type: 'passToParent' }
];

渲染时在onChange里同步更新状态，同时判断如果是后两个复选框，就把值传递给父组件：

{checkboxes.map(({ id, label }) => (
  <label key={id} style={{ display: 'block', margin: '8px 0' }}>
    <input
      type="checkbox"
      checked={checkboxStates[id]}
      onChange={(e) => {
        // 复制当前状态并更新选中的复选框值
        const updatedState = { ...checkboxStates, [id]: e.target.checked };
        setCheckboxStates(updatedState);
        
        // 后两个复选框变化时通知父组件
        if (id === 'checkbox4' || id === 'checkbox5') {
          props.onChildCheckboxChange({ [id]: e.target.checked });
        }
      }}
    />
    {label}
  </label>
))}

3. 按钮启用的校验逻辑 #

直接判断前三个复选框是否全为true，用这个结果控制按钮的disabled属性：

const isButtonEnabled = checkboxStates.checkbox1 && checkboxStates.checkbox2 && checkboxStates.checkbox3;

// 按钮渲染
<button disabled={!isButtonEnabled} style={{ marginTop: '16px' }}>确认操作</button>

完整可运行代码 #

import { useState } from 'react';

const CheckboxGroup = ({ onChildCheckboxChange }) => {
  const [checkboxStates, setCheckboxStates] = useState({
    checkbox1: false,
    checkbox2: false,
    checkbox3: false,
    checkbox4: false,
    checkbox5: false
  });

  const checkboxes = [
    { id: 'checkbox1', label: '必填选项1', type: 'required' },
    { id: 'checkbox2', label: '必填选项2', type: 'required' },
    { id: 'checkbox3', label: '必填选项3', type: 'required' },
    { id: 'checkbox4', label: '需传父组件选项1', type: 'passToParent' },
    { id: 'checkbox5', label: '需传父组件选项2', type: 'passToParent' }
  ];

  const isButtonEnabled = checkboxStates.checkbox1 && checkboxStates.checkbox2 && checkboxStates.checkbox3;

  return (
    <div>
      {checkboxes.map(({ id, label }) => (
        <label key={id} style={{ display: 'block', margin: '8px 0' }}>
          <input
            type="checkbox"
            checked={checkboxStates[id]}
            onChange={(e) => {
              const updatedState = { ...checkboxStates, [id]: e.target.checked };
              setCheckboxStates(updatedState);
              
              if (id === 'checkbox4' || id === 'checkbox5') {
                onChildCheckboxChange({ [id]: e.target.checked });
              }
            }}
          />
          {label}
        </label>
      ))}
      <button disabled={!isButtonEnabled} style={{ marginTop: '16px' }}>
        确认操作
      </button>
    </div>
  );
};

export default CheckboxGroup;

额外提示 #

• 后续要新增复选框时，直接在配置数组里添加条目即可，无需修改状态和渲染逻辑，扩展性很强。
• 如果需要一次性把后两个复选框的完整状态传给父组件，可以修改onChange里的传值逻辑：

// 替换原传值代码
const parentValues = {
  checkbox4: updatedState.checkbox4,
  checkbox5: updatedState.checkbox5
};
onChildCheckboxChange(parentValues);

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