我正在使用material-table component,除了onRowEdit
之外,我还有两个自定义操作来编辑行。我通过以下方式使它们可编辑:
rowData.tableData.editing = "update";
this.forceUpdate();
我知道这不是最好的方法,但是熟悉该组件的开发人员帮助了我,并提出了最好的(也是唯一的)方法。
问题是我想取消或发送对这两个操作所做的修改,而我发现的方法是使用tableRef
(如该docs的最后一个示例所示)。该表在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
}
]}
/>
)
}
}