問題描述：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'
}
具體是什么說法，我也解釋不太清楚，反正問題是解決了，期望對大家有所幫助