ant design 给表格添加可编辑列，无法取到组件的this值

最新推荐文章于 2024-06-21 17:31:31 发布

原创最新推荐文章于 2024-06-21 17:31:31 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#antd

错误总结专栏收录该内容

6 篇文章

订阅专栏

本文介绍在React中如何为表格添加编辑按钮，并通过props传递方法实现在点击按钮时触发事件。解决this指向问题，确保可以访问父组件的方法。

问题：想为表格实现一列编辑按钮，并且点击按钮会触发相应的事件

先写了以下的代码，发现this为undefined，所以无法调用this，也就没法去触发组件下的方法

{
        title: '操作',
        dataIndex: '',
        key: 'x',
        render: (record, row) =>
            (<span>
                <a href="#" onClick={() => this.handleEdit(true)}>编辑</a>
            </span>)
    }]

解决办法，通过props传值的方法，由父组件将方法传递给子组件

<Table dataSource={data}
    columns={columns({
       handleEdit: this.setModal1Visible
    })}
    pagination={{total, onChange: this.handleSearch}}>
</Table>

const columns = (props) => {
    const { handleEdit } = props;
    return [{
        title: '操作',
        dataIndex: '',
        key: 'x',
        render: (record, row) =>
            (<span>
                <a href="#" onClick={() => handleEdit(true)}>编辑</a>
            </span>)
    }]
};

这样就可以访问到父组件的setModal1Visible方法了