材料表单击时使行可编辑

Question

使用材质表库，我正在尝试使表行在双击时可编辑。单击该行应与单击操作列中最左侧的编辑按钮具有相同的效果。我已成功链接到正确的事件处理程序，现在双击行时由警报框表示。

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

这是一个纯粹的黑客攻击，没有这样的事件可以触发，所以我只是深入挖掘核心，找到事件触发因素，并在里面找到它。objectprops.actionsprops.actions包含 的数组，例如 ， ，因此通过获取它的 ref，您可以从中触发任何事件。actionsaddeditdelete这是它的代码片段，看看：<MTableBodyRow&nbsp; &nbsp; {...props}&nbsp; &nbsp; onDoubleClick={(e) => {&nbsp; &nbsp; &nbsp; &nbsp; console.log(props.actions) // <---- HERE : Get all the actions&nbsp; &nbsp; &nbsp; &nbsp; props.actions[1]().onClick(e,props.data); // <---- trigger edit event&nbsp; &nbsp; &nbsp; &nbsp; alert("Make row editable");&nbsp; &nbsp; }}/>