我对 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>
);
这也让我困惑了一段时间,直到我意识到它实际上非常简单:')
您只需使用“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>
</>
);
我希望这对您有所帮助
有几个数据表属性,您可以使用 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
},
},
];
你可以这样走(PrimeReact):
const items =(data: any) => ([
{
label: "Replicate",
icon: "pi pi-copy",
command: async (event: MenuItemCommandEvent) => {
console.log(event, data)
},
},
{
label: "Delete",
icon: "pi pi-trash",
command: () => {
},
},
]);
<DataTable
>
<Column
body={(rowData) => (
<SplitButton
label="Edit"
icon="pi pi-pencil"
model={items(rowData)}
/>
)}
exportable={false}
header="Actions"
></Column>
</DataTable>
感谢@Ahmed Hassan 的想法