在
React中，我们可以使用Ant Design库提供的
表格组件和useState Hook来创建
一个全选反选的功能。这里是
一个简单的示例：
```
jsx
import
React, { useState } from '
react';
import { Table, Input, Button } from 'antd';
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
// 添加
一个自定义列处理全选
{
title: 'Actions',
render: (text, record) => (
<div>
{/* 初始状态为未选中 */}
<Input type="checkbox" checked={record.isSelect} onChange={(e) => handleCheckboxChange(record.key, e.target.checked)} />
</div>
),
},
];
const handleCheckboxChange = (key, isChecked) => {
const isCheckedList = [...selectedKeys]; // 获取当前已选的
记录ID列表
if (isChecked) {
isCheckedList.push(key);
} else {
isCheckedList.splice(isCheckedList.findIndex((item) => item === key), 1);
}
setSelectedKeys(isCheckedList); // 更新状态
handleToggleAll(isChecked); // 如果全选则切换其他所有行
};
const handleToggleAll = (checked) => {
setAllSelectedKeys([...selectedKeys].every((item) => item === allSelectedKey) ? [] : allSelectedKey);
// 遍历
表格数据并更新isSelect属性
setData((prevData) =>
prevData.map((item) =>
Object.assign({}, item, {
isSelect: checked || item.key === allSelectedKey,
})
)
);
};
// 初始化状态
const [data, setData] = useState([
{ key: '1', name: 'Row 1' },
{ key: '2', name: 'Row 2' },
// ...
]);
const [selectedKeys, setSelectedKeys] = useState([]);
const [allSelectedKey, setAllSelectedKey] = useState(null);
ReactDOM.render(
<Table columns={columns} dataSource={data} selectedKeys={selectedKeys} onChange={handleCheckboxChange} />,
document.getElementById('container')
);
// 全选按钮
<Button onClick={() => handleToggleAll(!allSelectedKey)}>
{allSelectedKey ? '取消全选' : '全选'}
</Button>
```
在这个例子中，我们添加了
一个自定义的“Actions”列，其中包含
一个复选框。当用户点击某一行的复选框时，会触发`handleCheckboxChange`函数，更新选定
记录的状态。同时，我们还提供了
一个全局的全选按钮，点击它会遍历所有行并更新它们的`isSelect`属性。
扫一扫
778
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
