React函数式组件：点击删除按钮删除选中复选框的实现方法

这里给你一个简洁易懂的实现方案，完全基于React函数式组件和Hooks：

完整代码示例 #

import { useState } from 'react';

function ItemList() {
  // 初始化待处理的列表数据，每个项用唯一id标识
  const [items, setItems] = useState([
    { id: 1, name: '项目1' },
    { id: 2, name: '项目2' },
    { id: 3, name: '项目3' },
    { id: 4, name: '项目4' }
  ]);
  // 用Set存储选中项的id，方便快速判断和增删
  const [selectedIds, setSelectedIds] = useState(new Set());

  // 切换单个复选框的选中状态
  const toggleCheckbox = (itemId) => {
    setSelectedIds(prevSelected => {
      const updatedSet = new Set(prevSelected);
      updatedSet.has(itemId) ? updatedSet.delete(itemId) : updatedSet.add(itemId);
      return updatedSet;
    });
  };

  // 删除所有选中项的逻辑
  const deleteSelectedItems = () => {
    // 过滤掉id在选中集合里的项
    const remainingItems = items.filter(item => !selectedIds.has(item.id));
    setItems(remainingItems);
    // 清空选中状态
    setSelectedIds(new Set());
  };

  return (
    <div style={{ padding: '20px' }}>
      {/* 删除按钮：没有选中项时禁用 */}
      <button 
        onClick={deleteSelectedItems} 
        disabled={selectedIds.size === 0}
        style={{ marginBottom: '15px', padding: '8px 16px' }}
      >
        删除选中项
      </button>

      {/* 渲染列表和复选框 */}
      <ul style={{ listStyle: 'none', padding: 0 }}>
        {items.map(item => (
          <li key={item.id} style={{ marginBottom: '8px' }}>
            <input
              type="checkbox"
              checked={selectedIds.has(item.id)}
              onChange={() => toggleCheckbox(item.id)}
            />
            <span style={{ marginLeft: '8px' }}>{item.name}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ItemList;

关键逻辑拆解 #

• 状态管理：用两个useState分别维护列表数据和选中项的id集合，这种方式比把选中状态存在每个项里更灵活，尤其是列表数据来自后端的场景。
• 复选框交互：点击复选框时，通过操作Set来添加或移除对应项的id，保证状态更新的准确性。
• 删除操作：利用数组filter方法筛选出未被选中的项，更新列表状态，同时清空选中集合，避免残留状态。
• 用户体验优化：当没有选中任何项时，禁用删除按钮，防止无效操作。

另一种实现思路（项自带选中状态） #

如果你的列表项本身需要存储选中状态（比如需要回显），可以直接把checked字段放在每个项里：

import { useState } from 'react';

function ItemList() {
  const [items, setItems] = useState([
    { id: 1, name: '项目1', checked: false },
    { id: 2, name: '项目2', checked: false },
    { id: 3, name: '项目3', checked: false }
  ]);

  const toggleCheckbox = (itemId) => {
    setItems(prevItems => 
      prevItems.map(item => 
        item.id === itemId ? { ...item, checked: !item.checked } : item
      )
    );
  };

  const deleteSelectedItems = () => {
    setItems(prevItems => prevItems.filter(item => !item.checked));
  };

  // 渲染部分和之前类似，checked属性直接用item.checked即可
  return (
    <div>
      <button onClick={deleteSelectedItems} disabled={!items.some(item => item.checked)}>
        删除选中项
      </button>
      <ul>
        {items.map(item => (
          <li key={item.id}>
            <input
              type="checkbox"
              checked={item.checked}
              onChange={() => toggleCheckbox(item.id)}
            />
            {item.name}
          </li>
        ))}
      </ul>
    </div>
  );
}

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