材料表单击时使行可编辑

Question

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

Answer 1

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

所以我只是深入挖掘核心，找到事件触发因素，并在里面找到它。objectprops.actions

props.actions包含 的数组，例如 ， ，因此通过获取它的 ref，您可以从中触发任何事件。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");

    }}

/>