在 React-Table 中，如何 check/uncheck 一行或一列中的所有复选框

Question

我有一个 table 使用 react-table 和行中的复选框。我还在一行的第一个单元格中添加了一个 "check all" 复选框，到 check/uncheck 该行每一列中的所有复选框。

问题是当我实现 "check all" 复选框时，它按预期工作，但是当我单独 check/uncheck 一个复选框时它没有 check/uncheck.

Table 组件

import React from 'react';
import ReactTable from 'react-table';
import setTableColumns from '../utils/setTableColumns';

const RolePermissionsTable = () => {
  return (
    <ReactTable
      defaultPageSize={10}
      data={capacity.roles}
      columns={setTableColumns()}
      showPagination={false}
      getTrProps={(state, rowData, column, instance) => {
        return {
          onClick(event) {
            const row = event.currentTarget;
            const targetEntity = row.querySelector(
              '.RoleTarget [type="checkbox"]'
            );
            const allCheckboxes = Array.prototype.slice.call(
              row.querySelectorAll('[type="checkbox"]')
            );
            const permissionsCheckboxes = allCheckboxes.slice(
              1,
              allCheckboxes.length
            );
            const isChecked = targetEntity.checked;

            permissionsCheckboxes.map(permissionsCheckbox => {
              permissionsCheckbox.checked = isChecked ? isChecked : null;
            });
          },
        };
      }}
    />
  );
};

列Headers

import React from 'react';

// imported above for the table
const setTableColumns = () => {
  return [
    {
      Header: 'Entities',
      accessor: 'target',
      Cell: rowData => (
        <span className="RoleTarget" key={rowData.original.target}>
          <input
            id={`CheckAll-${rowData.original.target}`}
            type="checkbox"
          />
          <span className="RoleTarget__name">{rowData.original.target}</span>
        </span>
      ),
    },
    {
      Header: 'Add',
      accessor: 'add',
      Cell: rowData => {
        return (
          <input
            type="checkbox"
            defaultChecked={rowData.original.permissions.add}
            id={`${rowData.original.target}-${rowData.original.userId}`}
          />
        );
      },
    },
    {
      Header: 'Modify',
      accessor: 'modify',
      Cell: rowData => {
        return (
          <input
            type="checkbox"
            defaultChecked={rowData.original.permissions.modify}
            id={`${rowData.original.target}-${rowData.original.userId}`}
          />
        );
      },
    },
    {
      Header: 'Delete',
      accessor: 'delete',
      Cell: rowData => {
        return (
          <input
            type="checkbox"
            defaultChecked={rowData.original.permissions.delete}
          />
        );
      },
    },
  ];
};

我不确定我这样做是否正确，或者是否有更好的方法？

非常感谢

Answer 1

我不想说有没有"a better way"，如果你的方案解决了你的问题就已经很好了。我确实认为有一种更简单的方法。有一个简单的包可以解决这个问题 grouped-checkboxes.

View on codesandbox

在您的情况下，它将如下所示：

import React from 'react';
import ReactTable, { ReactTableDefaults } from 'react-table';
import setTableColumns from '../utils/setTableColumns';
import { CheckboxGroup } from '@createnl/grouped-checkboxes';

const TrComponent = ({ children, ...rest }) => (
 <tr {...rest}>
   <CheckboxGroup>{children}</CheckboxGroup>
 </tr>
);

const RolePermissionsTable = () => {
  Object.assign(ReactTableDefaults, {
    TrComponent: TrComponent
  });

  return (
    <ReactTable
      defaultPageSize={10}
      data={capacity.roles}
      columns={setTableColumns()}
      showPagination={false}
    />
  );

列Headers

import React from 'react';
import { AllCheckerCheckbox, Checkbox } from '@createnl/grouped-checkboxes';

// imported above for the table
const setTableColumns = () => {
  return [
    {
      Header: 'Entities',
      accessor: 'target',
      Cell: rowData => (
        <span className="RoleTarget" key={rowData.original.target}>
          <AllCheckerCheckbox
            id={`CheckAll-${rowData.original.target}`}
          />
          <span className="RoleTarget__name">{rowData.original.target}</span>
        </span>
      ),
    },
    {
      Header: 'Add',
      accessor: 'add',
      Cell: rowData => {
        return (
          <Checkbox
            checked={rowData.original.permissions.add}
            id={`${rowData.original.target}-${rowData.original.userId}`}
          />
        );
      },
    },
    {
      Header: 'Modify',
      accessor: 'modify',
      Cell: rowData => {
        return (
          <Checkbox
            checked={rowData.original.permissions.modify}
            id={`${rowData.original.target}-${rowData.original.userId}`}
          />
        );
      },
    },
    {
      Header: 'Delete',
      accessor: 'delete',
      Cell: rowData => {
        return (
          <Checkbox
            checked={rowData.original.permissions.delete}
          />
        );
      },
    },
  ];
};

在 React-Table 中，如何 check/uncheck 一行或一列中的所有复选框

In React-Table, how to check/uncheck all checkboxes in a row or column

html

javascript

checkbox

reactjs

react-table

Table 组件

列Headers