带有 ID 的 React Datatable 组件中的编辑按钮答案

【问题标题】：Edit Button in React Datatable Component with ID带有 ID 的 React Datatable 组件中的编辑按钮
【发布时间】：2020-01-31 10:42:13
【问题描述】：

如何在 reactJS 数据表组件的列单元格的编辑按钮中传递 id？

【问题讨论】：

欢迎来到stackoverflow Dhwani。请发布您的代码。现在范围太广了。
您使用@Dhwani Shah 的确切软件包名称是什么。 ? npm 注册表中有相当多的数据表组件
我在我的应用程序中使用了 react-data-table-component 包

标签： javascript reactjs

【解决方案1】：

我已经使用“react-table”npm 包完成了它。在不确切了解您的要求的情况下，建议使用我上面提到的包有点困难。

React Table - npm package

你可以看看这是否适合你的要求。

【讨论】：

【解决方案2】：

您需要使用列的cell property。

const columns = [
{
 name: "Name",
 selector: "name",
 sortable: true,
},
{
 name: "Phone",
 selector: "phone",
 sortable: true,
 right: true,
},
{
key: "action",
text: "Action",
className: "action",
width: 100,
align: "left",
sortable: false,
cell: (record) => {
  return (
    <Fragment>
      <button
        className="btn btn-primary btn-sm"
        onClick={() => {
          onEdit(record);
        }}
      >
        Edit
      </button>
    </Fragment>
  );
 },
},
];

在onEdit方法中，可以操作数据或者调用axios，更新状态重新渲染。

【讨论】：