慕姐4208626
2022-09-29 16:45:12
使用材質(zhì)表庫,我正在嘗試使表行在雙擊時可編輯。單擊該行應(yīng)與單擊操作列中最左側(cè)的編輯按鈕具有相同的效果。我已成功鏈接到正確的事件處理程序,現(xiàn)在雙擊行時由警報框表示。https://codesandbox.io/s/lucid-microservice-73iq8?file=/src/App.js:0-1203import 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" /> );}
1 回答

Cats萌萌
TA貢獻(xiàn)1805條經(jīng)驗 獲得超9個贊
這是一個純粹的黑客攻擊,沒有這樣的事件可以觸發(fā),
所以我只是深入挖掘核心,找到事件觸發(fā)因素,并在里面找到它。objectprops.actions
props.actions包含 的數(shù)組,例如 , ,因此通過獲取它的 ref,您可以從中觸發(fā)任何事件。actionsaddeditdelete
這是它的代碼片段,看看:
<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");
}}
/>
添加回答
舉報
0/150
提交
取消