[英]In React-Table, how to check/uncheck all checkboxes in a row or column
我有一個使用react-table
,行react-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;
});
},
};
}}
/>
);
};
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, { 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}
/>
);
},
},
];
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.