react+antdesign 表格删除失败
·
https://ant.design/components/table-cn/#components-table-demo-dynamic-settings

错误写法:
一开始会删除成功;再第二步的时候会删除失败;你会发现state中的数据就算你在确认删除后并清空数组,也跟本没有变化
// 删除
handleDelte = () => {
if (this.state.selectedRowKeys.length <= 0) {
message.warn('请选择要删除的数据!');
return;
}
Modal.confirm({
title: "确定要删除吗?",
okText: '删除',
cancelText: '取消',
onOk: () => {
service.deleteUser(this.state.selectedRowKeys).then(res => {
this.setState({selectedRowKeys:[]})
store.dispatch(LoadUserActionAsync(this.state.params))
message.info('删除成功!');
}).catch(err => {
message.error('删除失败!');
})
}
})
},
// tab复选框选择进行触发
userRowSelection = {
onChange: (selectedRowKeys) => {
// 获取ID
this.setState({ selectedRowKeys: selectedRowKeys })
}
}
render() {
return (
<div>
<Button style={this.buttonStyle} type="danger" onClick={this.handleDelte}>删除</Button>
<Table
style={{ 'background': '#fefefe' }}
dataSource={this.state.userlist}
columns={this.state.columns}
rowKey={record => record.id}
rowSelection={this.userRowSelection}
bordered
pagination={{ total: this.state.total, pageSize: 6, defaultCurrent: 1, onChange: this.changePage }}
/>
</div>
)
}
正确方法:把userRowSelection方法写在render中把this.userRowSelection改成userRowSelection
对数据进行关联重要 selectedRowKeys: selectedRowKeys,
render() {
let { selectedRowKeys } = this.state;
// tab复选框选择进行触发
let userRowSelection = {
selectedRowKeys: selectedRowKeys,
onChange: (selectedRowKeys) => {
// 获取ID
this.setState({ selectedRowKeys: selectedRowKeys })
}
}
return (
<div>
<Table
style={{ 'background': '#fefefe' }}
dataSource={this.state.userlist}
columns={this.state.columns}
rowKey={record => record.id}
rowSelection={userRowSelection}
bordered
pagination={{ total: this.state.total, pageSize: 6, defaultCurrent: 1, onChange: this.changePage }}
/>
<AddUser visible={this.state.showAddUserDialog} close={this.hideAddUserDialog} />
</div>
)
}
更多推荐
所有评论(0)