React项目中勾选Checkbox后按钮状态无法保持的问题如何解决？

核心问题 #

你当前的按钮状态直接绑定了Checkbox勾选关联的ID数组，取消勾选时ID会被从数组中移除，自然按钮就会变回Select状态，不符合需求。

改造方案 #

我们拆分两个独立状态分别控制：

• 一个状态存所有Checkbox的勾选状态，只响应Checkbox的勾选/取消操作
• 另一个状态存需要显示Remove按钮的ID列表，仅在勾选Checkbox时新增ID，取消勾选不修改该列表，只有点击Remove按钮时才删除对应ID
  同时修正原有代码中表格嵌套错误、事件绑定错误的问题，修改后完整App.js代码如下：

import { useState, useRef } from "react";
import "./styles.css";
import Defaultdata from "./Defaultdata";

export default function App() {
  const inputEl2 = useRef("");
  // 存储搜索状态
  const [seachstate, setStatevalue] = useState(false);
  // 存储Checkbox勾选状态，key为item.id，value为布尔值
  const [checkedMap, setCheckedMap] = useState({});
  // 存储需要显示Remove按钮的ID列表，只有勾选Checkbox时新增，点Remove时删除
  const [removeBtnIds, setRemoveBtnIds] = useState([]);

  const handleSearch = (e) => {
    setStatevalue(!seachstate);
    console.log(inputEl2.current);
  };

  // Checkbox勾选/取消事件
  const handleCheckChange = (itemId, isChecked) => {
    // 更新Checkbox勾选状态
    setCheckedMap(prev => ({
      ...prev,
      [itemId]: isChecked
    }));
    // 勾选时如果ID不在Remove按钮列表里，就加进去；取消勾选不修改列表
    if (isChecked && !removeBtnIds.includes(itemId)) {
      setRemoveBtnIds(prev => [...prev, itemId]);
    }
  };

  // Remove按钮点击事件
  const handleRemoveBtnClick = (itemId) => {
    // 把ID从Remove按钮列表里删掉，按钮就变回Select状态
    setRemoveBtnIds(prev => prev.filter(id => id !== itemId));
    // 可选：如果需要点击Remove同时取消对应Checkbox勾选，可以加下面这行
    // setCheckedMap(prev => ({...prev, [itemId]: false}))
  };

  return (
    <div className="App">
      <div>
        <input ref={inputEl2} type="text" />
        <button onClick={handleSearch}>search</button>
      </div>
      <table>
        <thead>
          <tr>
            <th></th>
            <th>Item 1</th>
            <th></th>
            <th>Item 2</th>
            <th>Item 3</th>
            <th>Item 4</th>
          </tr>
        </thead>
        <tbody>
          {Defaultdata.map((item) => {
            return (
              <tr key={item.id}>
                <td>
                  <input
                    type="checkbox"
                    checked={!!checkedMap[item.id]}
                    onChange={(e) => handleCheckChange(item.id, e.target.checked)}
                  />
                </td>
                <td>{item.id}</td>
                <td>
                  {removeBtnIds.includes(item.id) ? (
                    <button onClick={() => handleRemoveBtnClick(item.id)}>Remove</button>
                  ) : (
                    <button>Select</button>
                  )}
                </td>
                <td>{item.distance}</td>
                <td>{item.date_listed}</td>
                <td>{item.mode}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

逻辑说明 #

• 勾选Checkbox时，对应ID会被加入removeBtnIds数组，按钮立刻变为Remove状态
• 取消Checkbox勾选时，仅修改勾选状态，不会修改removeBtnIds数组，按钮保持Remove状态
• 只有点击Remove按钮时，对应ID才会被从removeBtnIds数组中移除，按钮变回Select状态

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