帶有 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 以重新渲染。