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

Question

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

Answer 1

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

反应表 - npm package

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

Answer 2

您需要使用列的单元格属性。

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 调用并更新 state 以重新渲染。