ReactJS+Typescript实现Checkbox勾选时给字符串数组增减元素

API 探路者

2026-9-25

问题原因

现有处理函数没有获取Checkbox的勾选状态做分支判断，无论用户执行勾选还是取消操作，都会直接往数组中添加元素
直接修改了原有selectedGroups状态数组的引用，不符合React状态不可变的更新原则，可能会导致视图无法正常触发重渲染

修复方案

步骤1：改造处理函数

优先使用React状态的函数式更新写法，保证每次拿到的都是最新的状态值，同时根据勾选状态做新增/移除的分支处理，TS类型也同步补全避免any类型：

import { ChangeEvent } from 'react';

// 若你的Checkbox值有固定枚举，可将string替换为对应枚举类型
const handleGroupChange = (e: ChangeEvent<HTMLInputElement>) => {
  const currentValue = e.target.value;
  const isChecked = e.target.checked;

  if (isChecked) {
    // 勾选时：先判断是否已存在，避免重复添加后返回新数组
    setSelectedGroups(prev => {
      if (!prev.includes(currentValue)) {
        return [...prev, currentValue];
      }
      return prev;
    });
  } else {
    // 取消勾选时：过滤掉当前值后返回新数组
    setSelectedGroups(prev => prev.filter(item => item !== currentValue));
  }
};