一、问题:点击筛选后,被选中的复选框没被选中
造成的原因: 表格中渲染的每一列都会默认绑定primaryKey属性,字段是key,这个是可以更改的(自己看文档)。筛选后数组变为3个,但是最初第一个是未被选中的,key标识没变,所以出现筛选后与实际数据展示的复选框不符。
解决办法: 打开代码中 columns 里操作列 key 的注释即可;或者给表格绑定的数据提前处理加个唯一的 key 字段;
useEffect(() => {
setarr(
arr.map((item: any) => {
item.key = item.id;
return item;
})
);
}, []);
import React, { useState } from 'react';
import { Checkbox, Table } from 'antd';
export default function learn10() {
const [arr, setarr] = useState([
{ id: 1, name: 'lili', isChecked: 0 },
{ id: 2, name: 'lala', isChecked: 1 },
{ id: 3, name: 'shasha', isChecked: 1 },
{ id: 4, name: 'xixi', isChecked: 1 }
]);
const columns = [
{
title: 'id',
dataIndex: 'id',
key: 'id'
},
{
title: '用户名',
dataIndex: 'name',
key: 'name'
},
{
title: '操作',
dataIndex: 'isChecked',
key: 'isChecked',
render: (text: any, record: any) => {
return (
<Checkbox
// key={record.id} // 打开注释解决
defaultChecked={record.isChecked > 0}
/>
);
}
}
];
return (
<div>
{/* 对比表格 */}
{arr.map((item) => {
return (
<Checkbox key={item.id} defaultChecked={Boolean(item.isChecked)} />
);
})}
<div>
<button
onClick={() => {
setarr(arr.filter((item) => item.isChecked));
}}
>
筛选勾中的框
</button>
</div>
<Table dataSource={arr} columns={columns} />
</div>
);
}