React多选框：如何通过按钮点击取消单个选中的复选框

当然可以实现，核心是让复选框状态与选中列表强绑定，同时通过唯一ID关联按钮和对应的复选框，避免名称重复导致的错误。以下是具体修改步骤：

1. 优化状态管理（合并冗余状态） #

你当前维护了selectedSubCats（ID数组）和subCategoryName（名称数组）两个状态，容易出现不同步问题。建议只保留一个状态存储选中的子分类对象，同时包含ID和名称：

const [selectedSubCats, setSelectedSubCats] = useState([]);

2. 给复选框绑定checked属性 #

确保复选框的选中状态与selectedSubCats完全同步，这样点击按钮移除后，复选框会自动取消选中：

{subCategories?.map((item, index) => (
  <div className="category-checkbox" key={index}>
    <CheckBoxButton
      id={item.id}
      name={item.name}
      value={item.id}
      // 绑定checked属性，判断当前项是否在选中列表中
      checked={selectedSubCats.some(subCat => subCat.id === item.id)}
      onChange={(e) => {
        const isChecked = e.target.checked;
        if (isChecked) {
          // 选中时添加当前子分类对象到列表
          setSelectedSubCats(prev => [...prev, item]);
        } else {
          // 取消时过滤掉对应ID的项
          setSelectedSubCats(prev => prev.filter(subCat => subCat.id !== item.id));
        }
      }}
      text={item.name}
    />
  </div>
))}

3. 修改按钮渲染与点击逻辑 #

直接遍历selectedSubCats获取ID和名称，添加点击事件移除对应项：

{selectedSubCats.map((subCat, index) => (
  <div key={index}>
    <button 
      style={{border:'none',padding:'10px 15px'}} 
      type="button" // 不需要submit类型，因为只是移除操作
      onClick={() => {
        // 点击按钮时，过滤掉对应ID的选中项
        setSelectedSubCats(prev => prev.filter(item => item.id !== subCat.id));
      }}
    >
      {subCat.name}<AiOutlineClose/>
    </button>
  </div>
))}

关键说明 #

• 使用ID作为唯一标识：避免子分类名称重复时，移除操作出错的问题。
• 状态单一化：只维护selectedSubCats一个状态，减少状态不同步的风险。
• 双向绑定复选框状态：通过checked属性让复选框始终与选中列表保持一致，按钮操作后自动更新复选框状态。

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