javascript - 单击 Material 表中的编辑图标访问

Question

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

注意:我只在单击编辑(笔)图标时才需要它，然后它才会变成“确定”和“取消”按钮。

Answer 1

首先您必须删除默认的编辑按钮。然后在 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 表在其代码中使用的要求:

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,
    }
  )