React DataTable 插入操作链接答案

【问题标题】：React DataTable insert action linkReact DataTable 插入操作链接
【发布时间】：2022-11-16 21:44:57
【问题描述】：

下午好！我有反应数据表组件

我正在尝试创建一个包含操作按钮的列（删除/编辑...）为此，在 clickHandler 中，我需要从数据中传递参数，例如 ID 或什至可能是其他参数。目前我正在尝试传递一个 ID 参数，但我什么也没得到

function DataBase (){

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

    const data = ([
        {
            id: 1,
            title: 'Beetlejuice',
            year: '1988',
            action: "d-1",
            cell:(row) => <a href={row.title} onClick={clickHandler} id="d1">Action</a>,
        },
        {
            id: 2,
            title: 'Ghostbusters',
            year: '1984',
            action: "d-2",
            cell:(row) => <a href={row.title} onClick={clickHandler} id="d-2">Action</a>,
        },
    ]);

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

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

export default DataBase;


}

无论我如何尝试，我都无法在 clickHandler 中获取 ID

请帮我解决这个问题

【问题讨论】：

标签： reactjs datatable react-data-table-component

【解决方案1】：

您需要从单元格中获取 props 并将道具传递给点击处理程序，例如，

  cell: (props) => (
    <a
      href="#"
      onClick={() => {
        clickHandler(props);
      }}
    >
      Action
    </a>
  );

在clickHandler 得到它，

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

工作示例：

【讨论】：