React中如何将第一个表格选中的行数据追加到第二个汇总表格中

核心思路 #

两个复用EnhancedTable的表格通过父组件维护的全局状态做数据联动，第一个表负责展示全量数据+提供勾选能力，第二个表只渲染已勾选的行数据。

具体实现步骤 #

1. 父组件新增状态管理全量数据和选中数据 #

在父组件AddToExclusionList中新增两个状态：全量源数据、已选中行的存储集合，这里推荐用Map存储已选行，通过行唯一ID做key，方便快速增删、判断选中状态、避免重复数据。

// 假设你的源数据每行有唯一字段id作为唯一标识，没有的话可以替换成其他唯一字段
function AddToExclusionList() {
  const classes = useStyles();
  // 全量源数据，你可以在useEffect里请求接口赋值
  const [allSourceData, setAllSourceData] = useState([]);
  // 存储已选中的行，key为行id，value为完整行数据
  const [selectedRowMap, setSelectedRowMap] = useState(new Map());
  // 你原来的其他状态保留
  const [sanctionsList, setSanctionsList] = useState([]);

  // 处理复选框勾选事件
  const handleRowCheck = (row, isChecked) => {
    setSelectedRowMap(prev => {
      const newMap = new Map(prev);
      if (isChecked) {
        newMap.set(row.id, row);
      } else {
        newMap.delete(row.id);
      }
      return newMap;
    })
  }

  // 已选中的行转数组，给第二个表格用
  const selectedRows = Array.from(selectedRowMap.values());

  // 剩下的逻辑保留
  const updateListsRow = ({ index, value, row }, listType) => {
    switch (listType) {
      case "sanctions":
        setSanctionsList((prevState) => {
          prevState[index].status = value;
          return [...prevState];
        });
        break;
      default:
    }
  };

2. 调整EnhancedTable组件的props配置 #

给EnhancedTable新增必要的props支持数据传入和勾选回调：

• data：必填，当前表格要渲染的数据源数组
• showCheckbox：是否显示行首复选框
• onCheckChange：复选框状态变化时的回调，参数为当前行数据、最新勾选状态

你原来的EnhancedTable内部的复选框勾选逻辑要对应修改，勾选时调用props.onCheckChange(row, 最新选中状态)。

3. 父组件给两个EnhancedTable传对应参数 #

return (
  <Grid className={classes.root}>
    <Grid item xs={12} style={{ textTransform: "capitalize" }}>
      <Card className={classes.cardColor} variant="outlined">
        <CardContent>
            <>
              {/* 第一个全量表：传全量数据、显示复选框、绑定勾选回调 */}
              <EnhancedTable
                show={true}
                step="first"
                data={allSourceData}
                showCheckbox={true}
                onCheckChange={handleRowCheck}
              />
            </>
        </CardContent>
      </Card>
    </Grid>
    <Box mt={3}></Box>
    <Grid item xs={12} style={{ textTransform: "capitalize" }}>
      <Card className={classes.cardColor} variant="outlined">
        <CardContent>
            <>
              <h3>summary table</h3>
              {/* 第二个汇总表：传已选行数组、隐藏复选框 */}
              <EnhancedTable 
                data={selectedRows}
                showCheckbox={false}
                checkboxToggle={(rowDetails) => {
                  updateListsRow(rowDetails, "sanctions");
                }}
              />
            </>
        </CardContent>
      </Card>
    </Grid>
  </Grid>
);
}

注意事项 #

• 如果你的源数据没有唯一ID，可以用JSON.stringify(row)或者行索引作为key，但要注意数据重复、排序变动带来的选中状态错乱问题，优先用业务唯一字段做标识。
• 如果需要支持全选功能，只要在全选事件触发时，把全量数据全部加入/移出selectedRowMap即可。

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