覆盖物料表中的添加行功能答案

【问题标题】：Overriding add row function in material table覆盖物料表中的添加行功能
【发布时间】：2021-10-19 20:04:30
【问题描述】：

我想在添加行可编辑打开之前执行一个函数。在此 UI 打开之前，我想执行一个功能。（如console.log('Hello')）这是我目前的材料表代码。

            <MaterialTable
                title="Timesheet"
                columns={columns}
                data={DataArray}
                icons={tableIcons}
                editable={{
                onRowAddCancelled: rowData => console.log('Row adding cancelled'),
                onRowUpdateCancelled: rowData => console.log('Row editing cancelled'),
                onRowAdd: newData =>
                    new Promise((resolve, reject) => {
                        
                        setTimeout(() => {
                            // add row
                        }, 1000);
                    }),    

                }}
                options={{
                    actionsColumnIndex: -1,
                    addRowPosition: "first",
                    search:false,
                    exportButton: true,
                    
                }}
                
            />

【问题讨论】：

什么不起作用？能详细点吗？
好的。顶部有一个 + 按钮，可让我添加行。但是当我单击按钮时，我希望它执行一个功能（可能是 console.log('Hello') ）然后执行添加行功能。够清楚吗？

标签： javascript reactjs material-table

【解决方案1】：

你可以把你要执行的代码放在onRowAdd回调函数中，例如

    <MaterialTable
      title="Timesheet"
      columns={columns}
      data={DataArray}
      icons={tableIcons}
      editable={{
        onRowAddCancelled: rowData => console.log('Row adding cancelled'),
        onRowUpdateCancelled: rowData => console.log('Row editing cancelled'),
        onRowAdd: newData => {
            console.log('Hello');
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    // add row
                }, 1000);
            });  
        }
      }}
      options={{
        actionsColumnIndex: -1,
        addRowPosition: "first",
        search:false,
        exportButton: true,
      }}
    />
  );

如果你想在 + 按钮点击时调用你的函数，你需要添加actions。例如

    <MaterialTable      
      actions={[
        {
          icon: 'add',
          tooltip: 'Add User',
          isFreeAction: true,
          onClick: (event) => alert("You want to add a new row")
        }
      ]}
    />

【讨论】：

当我将数据添加到行并单击保存时，会执行此 console.log('Hello')。我想在单击 + 按钮但在添加行打开之前执行 console.log('Hello')。
@SohanReddy + 按钮的代码在哪里？我在您提供的代码中没有看到它。在 MaterialTable 中，您可以使用 actions 属性将按钮添加到表格工具栏。在此处阅读更多信息material-table.com/#/docs/features/actions