Javascript 在React表格中，如何选中/取消选中行或列中的所有复选框

我有一个使用

react table

的表，表中的复选框在行中。 我还在行的第一个单元格中添加了一个“全选”复选框，以选中/取消选中该行每列中的所有复选框

问题是，当我实现“全部选中”复选框时，它按预期工作，但当我单独选中/取消选中一个复选框时，它不会选中/取消选中

表组件

从“React”导入React；
从“反应表”导入反应表；
从“../utils/setTableColumns”导入setTableColumns；
常量角色权限稳定=（）=>{
返回(
{
返回{
onClick（事件）{
常量行=event.currentTarget；
const targetEntity=row.querySelector(
'.RoleTarget[type=“checkbox”]'
);
const allcheckbox=Array.prototype.slice.call(
row.querySelectorAll（'[type=“checkbox”]'））
);
const permissionsCheckboxes=allCheckboxes.slice(
1.
所有复选框。长度
);
const isChecked=targetEntity.checked；
permissionsCheckbox.map（permissionsCheckbox=>{
permissionsCheckbox.checked=isChecked？isChecked:null；
});
},
};
}}
/>
);
};

列首

从“React”导入React；
//上面为表导入了
常量setTableColumns=（）=>{
返回[
{
标题：“实体”，
访问器：“目标”，
单元格：行数据=>(
{rowData.original.target}
),
},
{
标题：“添加”，
访问者：“添加”，
单元格：行数据=>{
返回(
);
},
},
{
标题：“修改”，
访问者：“修改”，
单元格：行数据=>{
返回(
);
},
},
{
标题：“删除”，
访问者：“删除”，
单元格：行数据=>{
返回(
);
},
},
];
};

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

---

非常感谢

我不想说是否有“更好的方法”，如果你的解决方案解决了你的问题，它已经很好了。我确实认为有一个更简单的方法。 有一个简单的包可以解决这个问题

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

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}
    />
  );

从“React”导入React；
从“react table”导入ReactTable，{ReactTableDefaults}；
从“../utils/setTableColumns”导入setTableColumns；
从“@createnl/grouped checkbox”导入{CheckboxGroup}；
常量TrComponent=（{children，…rest}）=>(
{儿童}
);
常量角色权限稳定=（）=>{
Object.assign（默认值{
TrComponent:TrComponent
});
返回(
);

列标题

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”导入React；
从“@createnl/分组复选框”导入{AllCheckerCheckbox，Checkbox}；
//上面为表导入了
常量setTableColumns=（）=>{
返回[
{
标题：“实体”，
访问器：“目标”，
单元格：行数据=>(
{rowData.original.target}
),
},
{
标题：“添加”，
访问者：“添加”，
单元格：行数据=>{
返回(
);
},
},
{
标题：“修改”，
访问者：“修改”，
单元格：行数据=>{
返回(
);
},
},
{
标题：“删除”，
访问者：“删除”，
单元格：行数据=>{
返回(
);
},
},
];
};

感谢您的响应。您的解决方案可以工作，但它会检查表中的每个复选框。我想要的是，它应该只选中/取消选中与checkAll复选框位于同一行上的所有复选框。如何使用

分组复选框

模块实现这一点？您好，SeyAde，我已经更新了代码并添加了一个codesandbox，供您使用d与。我覆盖defualt tr组件并向其添加复选框组。也不要忘记将defaultChecked更改为checked。关于覆盖组件的更多信息：它现在正在工作。感谢Alexej的帮助！这是您正在工作的react模块吗？

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}
    />
  );

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}
          />
        );
      },
    },
  ];
};