React之Antd table表格渲染按钮问题
问题描述：table表格渲染表格数据时，会自动触发操作列中Button的onClick函数，表格渲染完成后，点击Button按钮，onClick函数不能被触发。
// 定义表格表头数据
问题写法：
const columns = [
{
title:'编号',
dataIndex:'key',
key:'key',
render:(text,record,index)=>{
return <span>{size*(currenPage-1)+1+index}</span>
},
align: 'center'
},
{ title: '日期', dataIndex: 'holiday', key: 'holiday' ,align: 'center' },
{
title: '操作',
dataIndex: '', onClick={()=>this.delete(text.id)}
key: 'x',
render: (text) => <Button onClick={this.delete(text.id)}>删除</Button> // 问题所在处
align: 'center'
}
];
// 定义删除按钮的回调函数
delete=(text)=>{
const {page,size} = this.state
// console.log(text);
deleteHoliday(text).then(response=>{
if(response.code === 20000){
message.success('删除成功');
this.setState({currenPage:1})
this.init(page,size)
}else{
message.error('删除失败');
}
})
}
解决方法：
上网查询后，同行说官方文档的写法确实有这个bug,要改成下面的写法
{
title: '操作',
dataIndex: '', onClick={()=>this.delete(text.id)}
key: 'x',
render: (text) => <Button onClick={()=>this.delete(text.id)}>删除</Button> // 解决方案
align: 'center'
}
具体是什么说法，我也解释不太清楚，反正问题是解决了，期望对大家有所帮助
