材料表使行在单击时可编辑

Question

使用材料表库，我试图使表行可以通过双击进行编辑。单击该行应该与单击操作列最左侧的编辑按钮具有相同的效果。我已成功链接到正确的事件处理程序，现在双击一行时会出现警报框。

\n\n

https://codesandbox.io/s/lucid-microservice-73iq8?file=/src/App.js:0-1203

\n\n

import React from "react";\nimport MaterialTable, { MTableBodyRow } from "material-table";\n\nexport default function App() {\n  return (\n    <MaterialTable\n      columns={[\n        { title: "Ad\xc4\xb1", field: "name" },\n        { title: "Soyad\xc4\xb1", field: "surname" },\n        { title: "Do\xc4\x9fum Y\xc4\xb1l\xc4\xb1", field: "birthYear", type: "numeric" },\n        {\n          title: "Do\xc4\x9fum Yeri",\n          field: "birthCity",\n          lookup: { 34: "\xc4\xb0stanbul", 63: "\xc5\x9eanl\xc4\xb1urfa" }\n        }\n      ]}\n      components={{\n        Row: props => (\n          <MTableBodyRow\n            {...props}\n            onDoubleClick={() => {\n              alert("Make row editable");\n            }}\n          />\n        )\n      }}\n      editable={{\n        onRowAdd: newData =>\n          new Promise((resolve, reject) => {\n            resolve();\n          }),\n        onRowUpdate: (newData, oldData) =>\n          new Promise((resolve, reject) => {\n            resolve();\n          }),\n        onRowDelete: oldData =>\n          new Promise((resolve, reject) => {\n            resolve();\n          })\n      }}\n      data={[\n        { name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 }\n      ]}\n      title="Demo Title"\n    />\n  );\n}\n

\n

Answer 1

这是纯粹的黑客攻击，没有可以触发的事件，

所以我就深入内核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");
    }}
/>

工作演示：