0

我正在使用材料表组件，并且我有两个自定义操作来编辑行，除了onRowEdit. 我正在使它们可编辑：

rowData.tableData.editing = "update";
this.forceUpdate();

我知道这不是最好的做法，但熟悉该组件的开发人员帮助了我，并提出了最好的（也是唯一的）方法。问题是我想取消或发送使用这两个操作所做的修改，而我发现的方式是tableRef（如本文档的最后一个示例所示）。该表有current两个动作，指的是编辑和取消：onEditingApproved和onEditingCanceled。但是当我在自定义操作中使用这些功能时，它们当然会覆盖所有操作中的版本批准和版本取消。onEditingApproved有没有办法让onEditingCanceled每个动作都独一无二？我的代码与此类似：

class MultipleActions extends React.Component {
  tableRef = React.createRef();
  render() {
    return (
      <MaterialTable
        title="Multiple Actions Preview"
        columns={[
          { title: 'Name', field: 'name' },
          { title: 'Surname', field: 'surname' },
          { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
          {
            title: 'Birth Place',
            field: 'birthCity',
            lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
          },
        ]}
        tableRef={this.tableRef}
        data={[
          { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
          { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
        ]}        
        actions={[
          {
            icon: 'save',
            tooltip: 'Save User',
            onClick: (event, rowData) => alert("You saved " + rowData.name)
          },
          {
            icon: 'delete',
            tooltip: 'Delete User',
            onClick: (event, rowData) => 
              rowData.tableData.editing = "update";
              this.forceUpdate();
              this.tableRef.current.onEditingApproved = (
                    mode,
                    newData,
                    oldData
                  ) => {
                    //Do something
               }
               this.tableRef.current.onEditingCanceled = (mode, rowData) => {
               //Do something
             }
        ]}
      />
    )
  }
}
4

0 回答 0