reactjs将新行添加到可编辑的材料表中

Question

我想添加一个带有可编辑表的新行。添加新行时，我需要诸如保存和取消之类的按钮。我想使用工具栏上的+按钮添加新行。

，即按下添加按钮时。新行将添加到表中。我需要新行的“保存”和“取消”按钮。

我想使用右上角的+按钮添加和保存新记录。我该怎么办？

https://codesandbox.io/s/gifted-nash-2s5ff

`

 <MaterialTable
  actions={[
    rowData => ({
      icon: Edit,
      tooltip: "Edit",
      onClick: (event, rowData) => {
        isRowUpdating(rowData, true);
      }
    }),
    rowData => ({
      icon: DeleteOutline,
      tooltip: "Delete",
      onClick: (event, row) => {
        this.bountyModalDeleteForm();
      }
    }),


    {
      icon: Add,
      onClick: (event, rowData) => {
        console.log('New record !');
      },
      isFreeAction: true,
      tooltip: 'New record',
    }
  ]}

  components={{
    EditRow: props => {
      const newRowData = {
        ...props.data,
        id:  props.data.id,
        user: props.data.user,
      };

      return (
        <MTableEditRow
          {...props}
          data={newRowData}
          onEditingCanceled={(mode, rowData) => {
            isRowUpdating(rowData, false);
          }}
          onEditingApproved={(mode, newData, oldRowData) => {
            isRowUpdating(props.data, false);
            this.handleSubmitUpdate(newData);
          }}
        />
      );
    },

    Toolbar: props => (
      <div style={{background: "blue"}}>
        <StyledMTableToolbar {...props} />
      </div>
    ),

`