React：如何实现点击按钮全选/取消全选复选框？

核心思路 #

通过维护选中项ID集合的状态，配合全选/取消全选按钮的批量更新逻辑，实现对复选框列表的批量操作。

具体实现步骤 #

1. 状态定义
   在组件中声明两个状态变量：

• 存储从API获取的模板数据（templates）
• 存储当前选中的模板ID集合（selectedTemplateIds，用Set类型更方便增删和存在性判断）

const [templates, setTemplates] = useState([]);
const [selectedTemplateIds, setSelectedTemplateIds] = useState(new Set());

2. API数据获取
   组件挂载时调用API获取模板数据，更新templates状态：

useEffect(() => {
  // 替换为实际API请求逻辑
  const fetchTemplates = async () => {
    // 模拟返回示例数据：[{"templateID":"11","templateName":"All"},{"templateID":"21","templateName":"SC"}]
    const data = await (await fetch('你的API接口地址')).json();
    setTemplates(data);
  };
  fetchTemplates();
}, []);

3. 全选/取消全选逻辑

• 全选：将所有模板的templateID批量加入选中集合
• 取消全选：直接清空选中集合

const handleSelectAll = () => {
  const allTemplateIds = new Set(templates.map(item => item.templateID));
  setSelectedTemplateIds(allTemplateIds);
};

const handleUnselectAll = () => {
  setSelectedTemplateIds(new Set());
};

4. 单个复选框的切换逻辑
   点击单个复选框时，更新选中集合：

const handleToggleSingle = (templateId) => {
  setSelectedTemplateIds(prev => {
    const newSelectedSet = new Set(prev);
    newSelectedSet.has(templateId) 
      ? newSelectedSet.delete(templateId) 
      : newSelectedSet.add(templateId);
    return newSelectedSet;
  });
};

5. 页面渲染
   渲染操作按钮和复选框列表：

return (
  <div>
    <button onClick={handleSelectAll}>全选</button>
    <button onClick={handleUnselectAll}>取消全选</button>
    <div className="checkbox-group">
      {templates.map(template => (
        <label key={template.templateID} style={{display: 'block', margin: '8px 0'}}>
          <input
            type="checkbox"
            checked={selectedTemplateIds.has(template.templateID)}
            onChange={() => handleToggleSingle(template.templateID)}
          />
          {template.templateName}
        </label>
      ))}
    </div>
  </div>
);

关键说明 #

• 使用Set存储选中ID，比数组更高效处理增删和存在性判断
• 单个复选框的选中状态由selectedTemplateIds集合是否包含对应ID决定
• 全选/取消全选直接批量更新整个集合，避免循环操作单个复选框，性能更优

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