material-table - 在反应js中从外部材料表单击按钮时在材料表中添加行

Question

从物料表外部单击按钮时如何调用物料表的添加行功能

在物料表中添加新行

标签： material-table

Answer 1

进口import { forwardRef } from "react";

称呼 const addActionRef = React.useRef();

将此代码包含在您想要按钮的位置。我在这里使用材质 ui 按钮

<Button
  color="primary"
  variant="contained"
  onClick={() => addActionRef.current.click()}  //The line you need 
>
  Add new item
</Button>

并覆盖材料表中的动作

components = {
  {
    Action: props => {
      //If isn't the add action
      if (typeof props.action === typeof Function || props.action.tooltip !== 'Add') {
        return <MTableAction { ...props
        }
        />
      } else {
        return <div ref = {
          addActionRef
        }
        onClick = {
          props.action.onClick
        }
        />;
      }
    }
  }
}

如果你有任何问题，请询问。我在这里使用了带有材料 ui 的 react js。

https://github.com/mbrn/material-table/issues/2133

这个链接可能对你有帮助....这是我得到答案的地方