自定义操作,用于编辑行替代其他操作

时间:2019-08-16 14:00:53

标签: javascript reactjs material-table

我正在使用material-table component,除了onRowEdit之外,我还有两个自定义操作来编辑行。我通过以下方式使它们可编辑:

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

我知道这不是最好的方法,但是熟悉该组件的开发人员帮助了我,并提出了最好的(也是唯一的)方法。 问题是我想取消或发送对这两个操作所做的修改,而我发现的方法是使用tableRef(如该docs的最后一个示例所示)。该表在current内有两个引用版本和取消的操作:onEditingApprovedonEditingCanceled。但是,当我在自定义操作中使用这些功能时,它们当然会覆盖所有操作中的版本批准和版本取消。 有没有办法使每个动作具有唯一的onEditingApprovedonEditingCanceled? 我的代码与此类似:

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

0 个答案:

没有答案