React中如何获取复选框选中值并保存至数组？

原代码核心问题 #

1. 复选框未绑定对应项的唯一标识，无法区分选中的是哪个条目
2. 直接修改状态变量checkedItems = ""，违反React状态不可直接修改的规则
3. 选中/取消选中的逻辑不完整，未正确处理数组的添加与移除
4. 错误尝试获取e.target.value.checked——复选框的选中状态是e.target.checked，而要获取当前项的标识应该用e.target.value（原代码中value属性设置错误）

修正方案 #

1. 调整复选框属性

给每个复选框绑定对应item的唯一标识（比如item.id），并通过checkedItems数组判断当前项是否被选中：

<StyleCheckBox
  type="checkbox"
  value={item.id} // 绑定item的唯一ID，用于识别选中项
  checked={checkedItems.includes(item.id)} // 根据数组判断选中状态
  onChange={handleChange}
/>

2. 重写handleChange函数

正确处理选中/取消选中的逻辑，通过状态更新函数修改数组：

const handleChange = (e) => {
  const itemId = e.target.value; // 获取当前复选框绑定的item ID
  if (e.target.checked) {
    // 选中时，将ID添加到数组（避免重复添加）
    setCheckedItems(prev => [...prev, itemId]);
  } else {
    // 取消选中时，从数组中移除对应ID
    setCheckedItems(prev => prev.filter(id => id !== itemId));
  }
};

3. 移除冗余状态

不需要单独的isChecked状态，所有选中项的状态都由checkedItems数组管理，直接删除相关的useState和setIsChecked代码。

完整修正后的关键代码 #

import { useState } from 'react';

const App = () => {
  const [newItem, setNewItem] = useState("");
  const [items, setItems] = useState([]);
  const [checkedItems, setCheckedItems] = useState([]);

  const addItem = () => {
    if (newItem.trim()) {
      setItems(prev => [...prev, { id: Date.now(), value: newItem }]);
      setNewItem("");
    }
  };

  const handleOnKeyPress = (e) => {
    if (e.key === "Enter") addItem();
  };

  const deleteItem = (itemId) => {
    setItems(prev => prev.filter(item => item.id !== itemId));
    // 删除条目时同步移除选中数组中的对应ID
    setCheckedItems(prev => prev.filter(id => id !== itemId));
  };

  const handleChange = (e) => {
    const itemId = e.target.value;
    if (e.target.checked) {
      setCheckedItems(prev => [...prev, itemId]);
    } else {
      setCheckedItems(prev => prev.filter(id => id !== itemId));
    }
  };

  return (
    <div className="App">
      <StyleForm>
        <StyleInput
          type="text"
          placeholder="Add"
          value={newItem}
          onChange={(e) => setNewItem(e.target.value)}
          onKeyPress={handleOnKeyPress}
        />
        <ButtonAddStyle onClick={addItem}>add</ButtonAddStyle>

        <StyleUl>
          {items.map((item) => (
            <StyleLi key={item.id}>
              <StyleCheckBox
                type="checkbox"
                value={item.id}
                checked={checkedItems.includes(item.id)}
                onChange={handleChange}
              />
              {item.value}
              <ButtonDelStyle onClick={() => deleteItem(item.id)}>
                X
              </ButtonDelStyle>
            </StyleLi>
          ))}
        </StyleUl>
        {/* 调试用：查看当前选中的项ID */}
        <p>选中项ID：{checkedItems.join(", ")}</p>
      </StyleForm>
    </div>
  );
};

export default App;

额外说明 #

• 如果需要保存的是item.value而非item.id，只需把value={item.id}改为value={item.value}，同时将checkedItems.includes(item.id)改为checkedItems.includes(item.value)即可
• 始终通过状态更新函数（setCheckedItems）修改数组，确保状态更新的正确性
• 删除条目时同步清理checkedItems数组，避免残留无效ID

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