如何覆蓋反應材料表的操作按鈕

Question

我在我們正在進行的項目中使用材料表。 我需要覆蓋材料表的添加按鈕（+ 按鈕）和編輯按鈕（在附加的示例圖像中標記），而不是材料表的內聯添加/編輯功能我想要一個對話框（我的自定義組件）應該彈出用戶將在其中輸入他們的數據，然后單擊保存按鈕，將執行 API 調用。

有沒有辦法做到這一點？ 我可以使用 Materialtable 的 EditRow 道具嗎？ 如果是的話，有人可以舉一個關於如何使用 EditRow 的小例子嗎？

Answer 1

我使用 Material-Table 貢獻者 Matt Oestreich 提供的以下解決方案解決了這個問題。 我必須將 Actions 屬性與我的自定義 onClick 處理程序一起使用以進行自定義編輯，並且類似地在 actions 道具中將 set isFreeAction 添加為 true。

示例代碼框演示對於自定義編輯操作，請傳遞如下操作屬性：

<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
      }
    },
  ]}
/>