我有一个使用react-table
的表,其中有多行复选框。我还在行的第一个单元格中添加了一个“全部选中”复选框,以check / uncheck该行每一列中的所有复选框。
问题是当我实现“全部选中”复选框时,它按预期工作,但是当我单独选中/取消选中一个复选框时,它却没有选中/取消选中。
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;
});
},
};
}}
/>
);
};
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}
/>
);
},
},
];
};
我不确定是否正确执行此操作,或者是否有更好的方法?
非常感谢
我不想说是否有“更好的方法”,如果您的解决方案可以解决您的问题,那已经很好。我确实认为有一种更简单的方法。有一个简单的程序包可以解决此问题grouped-checkboxes。
根据您的情况,它看起来像这样:
import React from 'react';
import ReactTable from 'react-table';
import setTableColumns from '../utils/setTableColumns';
import { CheckboxGroup } from '@createnl/grouped-checkboxes';
const RolePermissionsTable = () => {
return (
<CheckboxGroup>
<ReactTable
defaultPageSize={10}
data={capacity.roles}
columns={setTableColumns()}
showPagination={false}
/>
</CheckboxGroup>
);
列标题
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
defaultChecked={rowData.original.permissions.add}
id={`${rowData.original.target}-${rowData.original.userId}`}
/>
);
},
},
{
Header: 'Modify',
accessor: 'modify',
Cell: rowData => {
return (
<Checkbox
defaultChecked={rowData.original.permissions.modify}
id={`${rowData.original.target}-${rowData.original.userId}`}
/>
);
},
},
{
Header: 'Delete',
accessor: 'delete',
Cell: rowData => {
return (
<Checkbox
defaultChecked={rowData.original.permissions.delete}
/>
);
},
},
];
};