React DataTable组件添加操作按钮时无法传递ID参数求助

你的问题根源在于两处配置错误：

• 列配置里的cell函数未接收当前行的row参数，也没有将行ID传递给点击事件处理函数
• 你在data数组中定义的cell属性无效，组件会优先使用columns中的列配置

修复步骤 #

1. 调整点击事件处理函数，让它可以直接接收行ID参数：

const clickHandler = (id) => {
    console.log("ID", id);
};

2. 修改columns中Action列的cell配置，接收row参数并在点击时传递行ID：

const columns = [
    // ...其他列配置
    {
        name: 'Action',
        selector: row => row.action,
        cell: (row) => <a href="#" onClick={() => clickHandler(row.id)}>Action</a>,
        ignoreRowClick: true,
        allowOverflow: true,
        button: true,
    },
];

完整修正代码 #

function DataBase (){

    const clickHandler = (id) => {
        console.log("ID", id);
    };

    const data = [
        {
            id: 1,
            title: 'Beetlejuice',
            year: '1988',
            action: "d-1",
        },
        {
            id: 2,
            title: 'Ghostbusters',
            year: '1984',
            action: "d-2",
        },
    ];

    const columns = [
        {
            name: 'Title',
            selector: row => row.title,
            sortable: true,
        },
        {
            name: 'Year',
            selector: row => row.year,
        },
        {
            name: 'Action',
            selector: row => row.action,
            cell: (row) => <a href="#" onClick={() => clickHandler(row.id)}>Action</a>,
            ignoreRowClick: true,
            allowOverflow: true,
            button: true,
        },
    ];

    return (
        <PageWrapper>
            <DataTable
                columns={columns}
                data={data}
                pagination
            />
        </PageWrapper>
    );
}

export default DataBase;

补充说明 #

如果需要同时获取事件对象和行ID，可以这样写：

const clickHandler = (e, id) => {
    e.preventDefault(); // 阻止a标签默认跳转行为
    console.log("ID", id);
};

// cell中的写法
cell: (row) => <a href="#" onClick={(e) => clickHandler(e, row.id)}>Action</a>

内容的提问来源于stack exchange，提问作者Sergo