如何覆盖反应的 Material-Table 的操作按钮

Question

我在我们正在进行的项目中使用 material-table。我需要覆盖 material-table 的添加按钮（+ 按钮）和编辑按钮（在附加的示例图像中标记），而不是 material 的内联 adding/editing 功能-table 我想要一个对话框（我的自定义组件）应该弹出，用户将在其中输入他们的数据，然后在单击保存按钮时将执行 API 调用。

有办法吗？我可以使用 Materialtable 的 EditRow 道具吗？如果是，有人可以举一个关于如何使用 EditRow 的小例子吗？

Answer 1

我使用 Material-Table 贡献者 Matt Oestreich 提供的以下解决方案解决了这个问题。我必须将 Actions 属性与我的自定义 onClick 处理程序一起使用以进行自定义编辑，同样地在 actions prop.

中将 set isFreeAction 添加到 true

sample code box demo 对于自定义编辑操作，传递如下所示的操作属性：

<MaterialTable
  // other props
  actions={[
    {
      icon: 'edit',
      tooltip: 'Edit Row',
      onClick: (event, rowData) => {
        // Code to display custom Dialog here
      }
    }
  ]}
/>

对于自定义添加操作，将动作属性与 isFreeAction 属性一起传递：

<MaterialTable
  // other props
  actions={[
    {
      icon: 'add',
      tooltip: 'Add Row',
      // This makes add button to appear in table toolbar instead for each row
      isFreeAction: true 
      onClick: (event, rowData) => {
        // Code to display custom Dialog here
      }
    }
  ]}
/>

我的最终代码看起来像这样：

<MaterialTable
  // other props
  actions={[
    {
      icon: 'edit',
      tooltip: 'Edit Row',
      onClick: (event, rowData) => {
        // Code to display custom Dialog here
      }
    },
    {
      icon: 'add',
      tooltip: 'Add Row',
      // This makes add button to appear in table toolbar instead for each row
      isFreeAction: true 
      onClick: (event, rowData) => {
        // Code to display custom Dialog here
      }
    },
  ]}
/>

如何覆盖反应的 Material-Table 的操作按钮

How can I override the Actions buttons of Material-Table of react

reactjs

material-table