以編程方式在材料表上添加新的加載行

Question

目標是觸發添加行 function ，它顯示一個帶有輸入的新行表單，並且都給定了特定的條件。 這可能嗎？ 我將如何 go 實現這一目標？

我想要實現的行為示例可以在“可編輯示例 - 可編輯預覽”下的文檔中找到： https://material-table.com/#/docs/features/editable 。

唯一的區別是我不需要單擊按鈕來觸發添加新行 function。

Answer 1

我查看了文檔並沒有看到 API 參考（可以調用哪些內部方法），所以我不確定要調用的正確 function，但我確信這可以通過 forwardRefs 完成。

const ParentComponent = () => {
    const tableRef = React.createRef();

    const handleButtonClick = () => {
        tableRef.current.addNewRow(); // addNewRow probably not the name of the function
    }

<MaterialTable
  title="Editable Preview"
  tableRef={tableRef} // you need this
  columns={columns}
  data={data}
  editable={{
    onRowAdd: newData =>
      new Promise((resolve, reject) => {
        setTimeout(() => {
          setData([...data, newData]);
          
          resolve();
        }, 1000)
      }),
    onRowUpdate: (newData, oldData) =>
      new Promise((resolve, reject) => {
        setTimeout(() => {
          const dataUpdate = [...data];
          const index = oldData.tableData.id;
          dataUpdate[index] = newData;
          setData([...dataUpdate]);

          resolve();
        }, 1000)
      }),
    onRowDelete: oldData =>
      new Promise((resolve, reject) => {
        setTimeout(() => {
          const dataDelete = [...data];
          const index = oldData.tableData.id;
          dataDelete.splice(index, 1);
          setData([...dataDelete]);
          
          resolve()
        }, 1000)
      }),
  }}
/>

    <Button onClick={handleButtonClick}>Add Row</Button>;
}

您可以使用 javascript 調試器查看 tableRef.current 上可用的方法並找到正確的“添加行”function。