如何为react-table函数添加ID？

Question

我正在尝试根据教程将 react-table 与 useRowSelect 一起使用。我有一个 REST 应用程序正在运行，/associate但无法弄清楚如何"selectedFlatRows[].original"从表中获取数据。以一种形式使用两个表也会使事情复杂化。

function App() {
  //...

  function handleSubmit(event) {
    event.preventDefault();
    const data = new FormData(event.target);

    fetch('/associate', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: data,
    });
  }

  return (
    <form onSubmit={handleSubmit}>
      <Styles>
        <Table columns={tcsColumns} data={tcsList} />
        <Table columns={planColumns} data={planList} />
        <br />
        <button>Associate!</button>
      </Styles>
    </form>
  );
}

如何访问我的两个表的数据？

Answer 1

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

基本上，我所做的是：

• 将函数处理程序作为onSelectedRows道具传递给每个表。在每个<Table /> 中，useEffect每当selectedFlatRows更改时使用钩子调用此函数。（好像是react-table100% 使用 hook，所以我找不到他们关于 using with class 的文档，但是不用担心，这仍然不会影响您的应用程序，只要您使用 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事件处理程序的按钮来检查选定的行：

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 将函数传递给组件，并使用来自组件的值来处理此父作用域。正如所做的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 />包装器来专门调用 submit 像往常一样的 Web 浏览器。在您的场景中，数据非常简单，因此只需一个onClick事件处理程序就足够了。

希望这有帮助