访问单击材料表中的编辑图标

如何解决访问单击材料表中的编辑图标

我在 Reactjs 中使用 Material Table 来显示表格数据。在这里，当我单击编辑选项/图标时，我被困在我想更改状态的部分。我不想更改 编辑 按钮的 onClick 功能，但我只想访问编辑图标。有什么办法可以实现吗？

注意：我只需要在它变成“确定”和“取消”按钮之前单击编辑（笔）图标时才需要它。

解决方法

如果此 html 模板是您编写的，那么您可以将图标包装在某个父元素中并在父元素上添加点击事件。

,

首先，您必须删除默认的编辑按钮。然后在 Button 和 action 道具中使用 tableRef。现在，您所要做的就是将编辑代码放入 onClick 事件中，如下所示：

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _objectSpread2 = _interopRequireDefault(
  require("@babel/runtime/helpers/objectSpread")
);
...

export default function MaterialTableDemo() {
  const tableRef = useRef(null);
  ...
  return (
    <MaterialTable
      ...
      tableRef={tableRef}
      actions={[
        {
          onClick: (event,rowData) => {
            console.log("Clicked",rowData);
            tableRef.current.dataManager.changeRowEditing(rowData,"update");

            tableRef.current.setState(
              (0,_objectSpread2["default"])(
                {},tableRef.current.dataManager.getRenderState(),{
                  showAddRow: false,}
              )
            );
          },},]}
      ...
    />
  )
}

这部分是material-table在其代码中使用的要求：

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _objectSpread2 = _interopRequireDefault(
  require("@babel/runtime/helpers/objectSpread")
);

此外，这是您触发编辑操作所需的代码：

tableRef.current.dataManager.changeRowEditing(rowData,"update");
tableRef.current.setState(
  (0,_objectSpread2["default"])(
    {},{
      showAddRow: false,}
  )