MUI数据网格编辑后如何获取行的值？

Question

我正在尝试获取刚刚从 mui 数据网格编辑的值。我的用例是我希望能够获取这些值并更新状态/发送更新数据库的请求。

我尝试过使用onEditRowsMo​​delChange和onRowEditStop属性，但onEditRowsMo​​delChange更新过于频繁，无法满足我的需求，并且onRowEditStop返回以前的值，但不是最近更新的值。这些值也采用需要解析才能获得的形式。

有没有人有这方面的经验？

Answer 1

使用默认编辑模式（单元格编辑模式），您必须使用onCellEditCommit

const onCellEditCommit= (cellData) => {
    const { id, field, value } = cellData;
    ...
}


<DataGrid 
    onCellEditCommit={onCellEditCommit}
    ...

在行编辑模式下，您可以使用，processRowUpdate但请确保您使用的experimentalFeatures={{ newEditingApi: true }}是数据网格

const processRowUpdate = (newRow) => {
    const updatedRow = { ...newRow, isNew: false };
    ...
    return updatedRow;
};


<DataGrid 
    editMode="row"
    processRowUpdate={processRowUpdate}
    experimentalFeatures={{ newEditingApi: true }}
    ...

Answer 2

您可以使用 OnCellEditCommit

<DataGridPro
    rows={rows}
    columns={columns}
    onCellEditCommit={handleRowEditCommit}
/>

你的handleRowEditCommit函数将如下所示

    const handleRowEditCommit = React.useCallback(
        (params) => {
            const id = params.id;
            const key = params.field;
            const value = params.value; },
        []
    );

Answer 3

我有一个使用 onEditRowsMo​​delChange 方法的相当丑陋的解决方案。正如您提到的，它会进行一些去抖动和解析：

let timer;
const handleEditRowsModelChange = (model) => {
        if(timer) clearTimeout(timer);
        timer = setTimeout(() => {
            setEditRowsModel(model);
            let siteId = Object.keys(model)[0];
            let field = siteId ? Object.keys(model[siteId])[0] : null;
            let value = field ? model[siteId][field].value : null;
            siteId && field && (
                sites.forEach(site => {
                    if (site.id == siteId) { 
                        if (site[field] != value) {
                            site[field] = value;
                            sendSiteForEdit(site);
                        }
                    };
                }
            ));
        }, 1500);
};