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' 

 }

具体是什么说法，我也解释不太清楚，反正问题是解决了，期望对大家有所帮助