如何使用 Primereact 中的 Splitbutton 获取数据表行数据/对象答案

【问题标题】：how to get data table row data/object using Splitbutton from primereact如何使用 Primereact 中的 Splitbutton 获取数据表行数据/对象
【发布时间】：2022-10-01 10:53:39
【问题描述】：

我对 ReactJs 很陌生，并试图制作一个项目来学习。我正在使用 PrimeReact UI 组件库。一切正常，但面临将行数据访问到函数的问题。

参考 - https://www.primefaces.org/primereact/splitbutton/

如果我单击操作按钮，那么它会显示数据

请帮我解决这个问题。提前致谢。

import { DataTable } from \"primereact/datatable\";
import { SplitButton } from \"primereact/splitbutton\";

/* split button items*/
const items = [
  {
    label: \"Update\",
    icon: \"pi pi-refresh\",
    command: (e) => {
      console.log(this);
      console.log(e); /* Need to receive row data here */
      /* I am getting {item:{label: \'Update\',icon: \'pi pi-refresh\',command: (e) },originalEvent:{...}} I have check originalEvent.target but no data is there */
    },
  },
  {
    label: \"Delete\",
    icon: \"pi pi-times\",
    command: (e) => {
      console.log(this);
      console.log(e); /* Need to receive row data here */
    },
  },
];

/* data to show */
const griddata = [
  {
    name: \"Tivaprasad Reddy\",
    employeeId: \"da9d1448-e1bd-4dad-9d57-dddf655c8ecf\",
    mobile: \"7099111460\",
    Status: \"SCREENING\",
    addedBy: \"anil kumar\",
    addedOn: \"2022-02-22T15:04:00.382+00:00\",
  },
  {
    name: \"Mukesh Bhutani\",
    employeeId: \"bcdefa7a-6c4d-4ac1-bd6d-025e88e08f62\",
    mobile: \"9582111515\",
    Status: \"SCREENING\",
    addedBy: \"anil kumar\",
    addedOn: \"2022-02-22T15:05:02.416+00:00\",
  },
];
const splitBtn = (d) => {
  console.log(d); /* Getting data here*/
};
const buttonTemplate = (data) => (
  <>
    <SplitButton
      label=\"Action\"
      className=\"p-button-sm\"
      model={items}
      onClick={(e) => splitBtn(data)}
    ></SplitButton>
  </>
);
return (
  <div>
    <div className=\"card\">
      <DataTable
        value={griddata}
        scrollable
        scrollHeight=\"500px\"
        responsiveLayout=\"scroll\"
      >
        <Column field=\"name\" header=\"Name\"></Column>
        <Column field=\"Title\" header=\"Title\"></Column>
        <Column field=\"Status\" header=\"Status\"></Column>
        {/* <Column field=\"Action\" header=\"Action\" body={editTemplate}></Column> */}
        <Column field=\"Action\" header=\"Action\" body={buttonTemplate}></Column>
      </DataTable>
    </div>
  </div>
);

标签： reactjs react-functional-component primeng-datatable primereact

【解决方案1】：

有几个数据表属性，您可以使用 onRowClick() 来实现此目的。

const [values, setValues] = useState({});

<DataTable
        value={griddata}
        scrollable
        scrollHeight="500px"
        responsiveLayout="scroll"
        onRowClick={(e) => { setValues(e.data) }} // setting row data in a state
      >
        <Column field="name" header="Name"></Column>
        <Column field="Title" header="Title"></Column>
        <Column field="Status" header="Status"></Column>
        <Column field="Action" header="Action" body={buttonTemplate}></Column>
      </DataTable>

现在，您可以使用在行单击时使用的状态变量来获取行数据。

const items = [
  {
    label: "Update",
    icon: "pi pi-refresh",
    command: (e) => {
      console.log(values); // row data
    },
  },
  {
    label: "Delete",
    icon: "pi pi-times",
    command: (e) => {
      console.log(values); // row data
    },
  },
];

【讨论】：

【解决方案2】：

这也让我困惑了一段时间，直到我意识到它实际上非常简单:')

您只需使用“Column”元素的“body”属性的回调函数中的“rowData”参数。

这里<Column field="Action" header="Action" body={buttonTemplate}></Column>“buttonTemplate”回调函数已经携带行数据并在第一个参数中呈现。

因此，将“items”变量转换为将“data”参数传递给您的项目的函数，就像这样

const items = (data) => ([
  {
    label: "Update",
    icon: "pi pi-refresh",
    command: (e) => {
      console.log(e, data);
    },
  },
  {
    label: "Delete",
    icon: "pi pi-times",
    command: (e) => {
      console.log(e, data);
    },
  },
]);

const buttonTemplate = (data) => (
  <>
    <SplitButton
      label="Action"
      className="p-button-sm"
      model={items(data)}
      onClick={(e) => splitBtn(data)}
    ></SplitButton>
  </>
);

我希望它有所帮助

【讨论】：