在反应表中进行气泡选择

Question

我试图将当前选择传递给父组件，以便在发生选择时做一些逻辑，但我似乎找不到可靠地获取选择的方法。我试过下面的方法。

function Table({ columns: userColumns, data, setSelection }) {
  const {
      ...,
      selectedFlatRows,
    } = useTable(
      {
        ...
      },
       ...,
      useRowSelect,
      (hooks) => {...})

  useEffect(() => {

      // Bubble up the selection to the parent component
      setSelection(selectedFlatRows.map((row) => row.original));
   }, [selectedFlatRows]);

但上面的方法只会造成一个无限循环。我根据指导意见建立了表的选择 文档中给出的但是他们似乎并没有涵盖如何可靠地获得所选行。

Answer 1

我没有得到一个无限循环。你在问题中提到的沙盒文档，我按照你的要求实现了，每件事都很顺利。请看一下 代码和盒子 以及我从沙盒中截取的简短片段。

import React from 'react'
import styled from 'styled-components'
import { useTable, useRowSelect } from 'react-table'

import makeData from './makeData'

function Table({ columns, data, setSelection }) {
  // Use the state and functions returned from useTable to build your UI
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
    selectedFlatRows,
    state: { selectedRowIds },
  } = useTable(
    {
      columns,
      data,
    },
    useRowSelect,
    hooks => {
      hooks.visibleColumns.push(columns => [
        // Let's make a column for selection
        {
          id: 'selection',
          // The header can use the table's getToggleAllRowsSelectedProps method
          // to render a checkbox
          Header: ({ getToggleAllRowsSelectedProps }) => (
            <div>
              <IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
            </div>
          ),
          // The cell can use the individual row's getToggleRowSelectedProps method
          // to the render a checkbox
          Cell: ({ row }) => (
            <div>
              <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
            </div>
          ),
        },
        ...columns,
      ])
    }
  )

  React.useEffect(() => {
    // Bubble up the selection to the parent component
    setSelection(selectedFlatRows.map((row) => row.original));
  }, [setSelection, selectedFlatRows]);

  console.log('selectedFlatRows', selectedFlatRows)

  // Render the UI for your table
  return (
    <>
      <table {...getTableProps()}>
        <thead>
          {headerGroups.map(headerGroup => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map(column => (
                <th {...column.getHeaderProps()}>{column.render('Header')}</th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          data here
        </tbody>
      </table>
    </>
  )
}

function App() {
  const [selection, setSelection] = React.useState([]);
  const columns = []

  const data = React.useMemo(() => makeData(10, 3), [])
  console.log('selection', selection)
  return (
    <Styles>
      <Table columns={columns} data={data} setSelection={setSelection} />
    </Styles>
  )
}

export default App

Answer 2

虽然 rotimi-best 的答案是正确的，但它并没有解决我的问题。我有一个包含函数的组件，它需要知道选择的情况。我的结构如下。

<Container> // This container needs to know about the selection.
   <Table
      columns={columns}
      data={data}
      setSelection={(selection) => handleSetSelection(selection)} // Passed down to the table instance
   />
</Container>

我的解决方案是将顶层的 setSelection 的使用回调。这样，再加上使用 react-table docs 概述的 memoization 就解决了这个问题。

Container:
...
const [selection, setSelection] = useState([]);
const selectionCallback = React.useCallback((ids) => setSelection(ids), [
    setSelection,
  ]);