我从您的教程链接中整理了一个快速修改的版本。您可以在这里查看：https://codesandbox.io/s/tannerlinsleyreact-table-row-selection-h3z4h?fontsize=14&hidenavigation=1&theme=dark

基本上，我所做的是：

• 将函数处理程序作为onSelectedRows属性传递给每个表。在每个<Table /内，只要useEffect发生更改，请使用selectedFlatRows钩子调用此函数。 （react-table似乎使用了100％的钩子，因此我找不到他们在与类一起使用时的文档，但是不用担心，只要您使用React 16.8+，这仍然不会影响您的应用程序，很好）

function Table({ onSelectedRows,columns,data }) {
  // Use the state and functions returned from useTable to build your UI
  const {
    ...,selectedFlatRows,} = useTable(
    {
      columns,data
    },useRowSelect
  );

  React.useEffect(() => {
    onSelectedRows(selectedFlatRows);
  },[selectedFlatRows]);

  ...
}

在父作用域中，添加一个状态来保存这些选定的行。然后只需添加带有onClick事件处理程序的Button即可检查选定的行：

function App() {
  ...
  const [selectedRows,setSelectedData] = React.useState([]);
  const onSelectedRows = rows => {
    const mappedRows = rows.map(r => r.original);
    setSelectedData([...selectedRows,...mappedRows]);
  };

  const onSubmitHandler = e => {
    e.preventDefault();
    console.log("submit: ",selectedRows);
  };

   return (
    <Styles>
      <button onClick={onSubmitHandler}>SUBMIT</button>
      <Table onSelectedRows={onSelectedRows} columns={columns} data={data} />
      <Table onSelectedRows={onSelectedRows} columns={columns2} data={data2} />
    </Styles>
  );
}

这里的重点是，您可以通过prop将函数传递给组件，并使用component中的值在此父作用域上进行处理。就像onSelectedRows所做的一样，它在此处接收表中所选行的列表。我只是做一个天真的解决方案，以合并数组和快速检查。在实际情况下，您需要检查是否有重复的行或添加的行才能跳过它。

如果您的<App />是基于类的组件，它将看起来像这样：（注意 this.onSelectedRows，this.onSubmitHandler ）

class App extends React.Component {
   state = {
      selectedRows: [],};

   const onSelectedRows = rows => {
    const mappedRows = rows.map(r => r.original);
    this.setState( prevState => {
       return {
        // your merged row array
       }
    })
  };

   const onSubmitHandler = e => {
     e.preventDefault();
     console.log("submit: ",selectedRows);
  };

   render() {
     return (
       <Styles>
         <button onClick={this.onSubmitHandler}>SUBMIT</button>
         <Table onSelectedRows={this.onSelectedRows} columns={this.columns} data={this.data} />
         <Table onSelectedRows={this.onSelectedRows} columns={this.columns2} data={this.data2} />
       </Styles>
     )
   }
}

您不需要<form />包装器就可以像通常的Web浏览器那样专门调用Submit。在您的情况下，数据非常简单，因此只需一个onClick事件处理程序即可。

希望获得帮助