Antd表格和Hooks小坑记录

Antd 表格组件小坑

以下均为Hooks写法

实际开发中，我们经常会遇到表格展示数据的需求，这就需要在Table组件里面专门给一列，写上逻辑就完成了，因为刚用React 总结下这个表格组件的坑。

我们实际想要的效果如下

当我们点击当前每一行的按钮时需要拿到每一行的所有信息对吧

来看下错误的书写方式

 const tableClick = (item: any): any=>{
        console.log(item)
    }

const columns = [
        {title: 'Full Name',dataIndex: 'name',key: 'name'},
        { title: 'Age', dataIndex: 'age', key: 'age',align:'center'},
        { title: 'Column 1', dataIndex: 'address', key: '1' },
        {
            title: 'Action',
            key: 'operation',
            render: (item:any) => {
                return (
                  //下面是关键部分 事件绑定
                    <Button size='small' className={styles.purple} type="primary" onClick={tableClick(item)}>当前行</Button>
                )
            },
        },
    ];

const data = [
        {
            key: '1',
            name: 'John Brown',
            age: 32,
            address: 'New York Park',
            children: [
                {
                    key: 131,
                    name: 'Jim ',
                    age: 42,
                    address: 'London No. 2 Lake Park',
                    children: [{
                            key: 1311,
                            name: 'jr.',
                            age: 25,
                            address: 'London No. 3 Lake Park',
                    }]
                }
            ]
        },
        {
            key: '2',
            name: 'Jim Green',
            age: 40,
            address: 'London Park',
        },
    ];

return(
              <Table size='small' bordered columns={columns} dataSource={data} pagination={false} />
)

然后我高兴的以为可以拿到每一行的值，热重载之后我发现，页面刷新一次，所有的对象的都被打印了。然后点击事件onClick 也没有效果，鼠标覆盖每一行都会触发该事件。以前我们在 VUE 里面也是直接用@click='tableClick(item)' 这种方式也没问题。这就有点郁闷.....

正确写法

 return (
        <Button size='small' className={styles.purple} type="primary" onClick={() => { tableClick(item)}}>当前行</Button>
)