需求:删除一行数据
问题:删除后selectedRowKeys残留和显示打钩残留问题。具体的说,selectedRowKeys中还残留得有已经删除的数据的key,而且界面应该显示没有打钩项,但是界面仍然残留有上次选中的打钩项。
在Ant Design官网上有相关的解决方法:用Table中的rowSelection的selectedRowKeys和onChange
https://ant.design/components/table-cn/#components-table-demo-row-selection-and-operation
定义rowSelection
const { selectedRowKeys } = this.state;
const rowSelection = {
selectedRowKeys,
onChange:this.onSelectChange
};
onSelectChange方法
onSelectChange = (selectedRowKeys) => {
console.log('selectedRowKeys changed: ', selectedRowKeys);
this.setState({ selectedRowKeys });
}
注意:这里的selectedRowKeys表示的是选中的行数,而不是key
这种问题其实可以用在column里面加一项名为“操作”的列,render进行操作,这样可以避免打钩。
{
title: '操作',
key: 'action',
render: (text, record,index) => (
<span>
{/* <a href="#">Action 一 {record.name}</a>
<span className="ant-divider" /> */}
<a href="#" onClick={this.updateUser.bind(this,record)}>编辑</a>
<a href="#" onClick={this.viewUser.bind(this,record)}>查看</a>
<a href="#" onClick={this.deleteUser.bind(this,record)}>删除</a>
{/* <span className="ant-divider" />
<a href="#" className="ant-dropdown-link">
More actions <Icon type="down" />
</a> */}
</span>
),
}