React-table 复选框不会对任何操作做出反应

Question

我有react-table v8 表。然后我有一些专栏。首先是复选框。

const columns = [
    columnHelper.accessor("select", {
      id: "select",
      header: "",
      cell: (cell) => (
        <input
          type="checkbox"
          onChange={cell.row.getToggleSelectedHandler}
          checked={cell.row.getIsSelected()}
        />
      ),
    }),
    columnHelper.accessor("id", {
      header: "№",
      cell: (cell) => (
        <Link href={`${routes.support.routes.detailTicket}?id=${cell.getValue()}`}>
          #{cell.getValue()}
        </Link>
      ),
    }),
...]

并且复选框不会对我在主项目中的任何操作做出反应。我完全按照文档中显示的方式进行操作。但在其他测试项目中 - 它运行完美。可能是什么问题？

这里 stackblitz 代码：https://stackblitz.com/edit/react-z2owmp?file=src%2FApp.js

Answer 1

首先，您需要将

testData

移出函数。然后直接处理复选框更改，而不是使用像这样的内置处理程序：

    columnHelper.accessor('select', {
      id: 'select',
      header: '',
      cell: (cell) => (
        <input
          type="checkbox"
          checked={cell.row.getIsSelected()}
          onChange={() => cell.row.toggleSelected()}
        />
      ),
      size: 100,
    }),

然后初始化空数组。

const [rowSelection, setRowSelection] = React.useState([]);

然后添加处理程序

onRowSelectionChange

处理程序，它将在用户单击复选框时更新选择状态。

  const onRowSelectionChange = (newSelection) => setRowSelection(newSelection);

const table = useReactTable({
    data: testData,
    columns,
    getCoreRowModel: getCoreRowModel(),
    onRowSelectionChange,
    state: {
      rowSelection,
    },
    enableRowSelection: true,
    debugTable: true,
  });

这是一个实例Stackblitz