material-table 单击时创建行 Editable

Question

使用 material-table 库，我试图在双击时创建 table 行 editable。单击该行应与单击操作列中最左侧的编辑按钮具有相同的效果。我已成功链接到正确的事件处理程序，现在双击一行时出现警告框。

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"
    />
  );
}

Answer 1

这是一个纯粹的hack，没有你可以触发的事件，

所以我直接深入内核object寻找事件触发器，我在props.actions

里面找到了

props.actions 包含 actions 的数组，例如 add、edit、delete，因此通过获取它的引用，您可以触发任何来自它的事件。

这是它的代码片段，请看一下：

<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");
    }}
/>

工作演示 :

material-table 单击时创建行 Editable

material-table Make Row Editable on Click

javascript

reactjs

material-ui

material-table