React项目如何实现勾选复选框后点击提交才切换对应按钮

• 状态拆分错误：没有区分「勾选阶段的临时选中列表」和「提交后生效的选中列表」，直接用实时更新的勾选列表判断按钮显示，且click状态只要触发过一次就会保持为true，导致勾选操作一更新选中列表，按钮就会立刻触发显示逻辑，不需要等提交。
• 复选框交互逻辑错误：点击事件绑定在span上而非input本身，且勾选逻辑顺序混乱（先加id再判断未勾选就删除），同时React的setState是异步更新，修改状态后立刻读取的是旧值，导致选中列表更新不符合预期。
• 提交逻辑错误：提交逻辑只判断了最后点击的单个复选框id，多选场景完全无法生效。
• HTML结构错误：tr标签内部嵌套tr，不符合表格标签规范，会导致渲染异常。

1. 新增两个独立状态：tempSelectedIds 存储勾选阶段临时选中的id，仅在勾选/取消勾选时更新；submittedIds 存储提交后生效的id，仅点击提交按钮时更新。按钮的显示状态完全由submittedIds判断。
2. 把复选框的交互事件直接绑定到input的onChange事件，通过e.target.checked判断是新增还是移除id，修正异步更新问题。
3. 提交逻辑改为直接把当前tempSelectedIds的内容同步到submittedIds即可。
4. 修正表格嵌套结构，把按钮所在的单元格放到同一行的td内。
5. 清理所有冗余无用的状态（click、clcikeditem、id、upd等）。

App.js #

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

export default function App() {
  // 临时选中的id，勾选时更新
  const [tempSelectedIds, setTempSelectedIds] = useState([]);
  // 提交后生效的id，仅点击提交时更新
  const [submittedIds, setSubmittedIds] = useState([]);

  // 复选框变更逻辑
  const handleCheckboxChange = (checked, itemId) => {
    if (checked) {
      // 勾选则加入临时列表
      setTempSelectedIds(prev => [...prev, itemId]);
    } else {
      // 取消勾选则从临时列表移除
      setTempSelectedIds(prev => prev.filter(id => id !== itemId));
    }
  };

  // 提交逻辑
  const handleSubmit = () => {
    // 把临时选中的列表同步到生效列表
    setSubmittedIds([...tempSelectedIds]);
  };

  return (
    <div className="App">
      <div>
        <button onClick={handleSubmit}>Submit</button>
      </div>
      <table>
        <thead>
          <tr>
            <th>勾选框</th>
            <th>Item ID</th>
            <th>按钮</th>
          </tr>
        </thead>
        <tbody>
          {Defaultdata.map((item, index) => {
            return (
              <tr key={index}>
                <td>
                  <input
                    type="checkbox"
                    onChange={(e) => handleCheckboxChange(e.target.checked, item.id)}
                    checked={tempSelectedIds.includes(item.id)}
                  />
                </td>
                <td>{item.id}</td>
                <td>
                  {submittedIds.includes(item.id) ? <button>Yes</button> : <button>no</button>}
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

Defaultdata.js（无修改） #

const Defaultdata = [
  {
    date_listed: "4 hours ago",
    id: "7857699961",
    delivery_time_frame: "2021-10-25 - 2021-11-14",
    distance: "22.8 km",
    time_stamp: "2021-10-25 16:36:54",
    watched: "yes",
    mode: "car"
  },
  {
    date_listed: "3 days ago",
    id: "8358962006",
    delivery_time_frame: "2021-10-18 - 2021-10-24",
    distance: "4.3 km",
    time_stamp: "2021-10-22 16:54:12",
    mode: "truck"
  },
  {
    date_listed: "4 hours ago",
    id: "8146462294",
    delivery_time_frame: "2021-10-25",
    distance: "4.3 km",
    time_stamp: "2021-10-25 16:12:32",
    mode: "bike"
  }
];

export default Defaultdata

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