[英]material-table Make Row Editable on Click
使用材料表庫,我試圖使表格行在雙擊時可編輯。 單擊該行應該與單擊操作列中最左側的編輯按鈕具有相同的效果。 我已成功鏈接到正確的事件處理程序,現在雙擊一行時由警告框表示。
https://codesandbox.io/s/lucid-microservice-73iq8?file=/src/App.js:0-1203
import React from "react";
import MaterialTable, { MTableBodyRow } from "material-table";
export default function App() {
return (
<MaterialTable
columns={[
{ title: "Adı", field: "name" },
{ title: "Soyadı", field: "surname" },
{ title: "Doğum Yılı", field: "birthYear", type: "numeric" },
{
title: "Doğum Yeri",
field: "birthCity",
lookup: { 34: "İstanbul", 63: "Şanlıurfa" }
}
]}
components={{
Row: props => (
<MTableBodyRow
{...props}
onDoubleClick={() => {
alert("Make row editable");
}}
/>
)
}}
editable={{
onRowAdd: newData =>
new Promise((resolve, reject) => {
resolve();
}),
onRowUpdate: (newData, oldData) =>
new Promise((resolve, reject) => {
resolve();
}),
onRowDelete: oldData =>
new Promise((resolve, reject) => {
resolve();
})
}}
data={[
{ name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 }
]}
title="Demo Title"
/>
);
}
這是一個純粹的黑客,沒有你可以觸發的事件,
所以我只是深入挖掘核心object
來查找事件觸發器,我在props.actions
中找到了它
props.actions
包含actions
數組,例如add
、 edit
、 delete
,因此通過獲取它的 ref 您可以從中觸發任何事件。
這是它的代碼片段,看看:
<MTableBodyRow
{...props}
onDoubleClick={(e) => {
console.log(props.actions) // <---- HERE : Get all the actions
props.actions[1]().onClick(e,props.data); // <---- trigger edit event
alert("Make row editable");
}}
/>
工作演示:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.