单击 material table 中的编辑图标访问

Question

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

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

Answer 1

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

Answer 2

首先你必须删除默认的编辑按钮。然后在 action 和 tableRef 道具中使用 Button。现在，您所要做的就是将编辑代码放入 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"])(
    {},
    tableRef.current.dataManager.getRenderState(),
    {
      showAddRow: false,
    }
  )

单击 material table 中的编辑图标访问

access clicking edit icon in material table

javascript

reactjs

material-ui

material-table