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

【问题标题】：How to get values of row after edit for MUI data grid?编辑 MUI 数据网格后如何获取行的值？
【发布时间】：2021-12-18 22:15:33
【问题描述】：

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

我曾尝试使用 onEditRowsModelChange 和 onRowEditStop 属性，但 onEditRowsModelChange 更新过于频繁，无法满足我的需要，并且 onRowEditStop 会返回以前的值，但不是最近更新的值。这些值也是需要解析才能到达的形式。

有人有这方面的经验吗？

【问题讨论】：

标签： datagrid material-ui

【解决方案1】：

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

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);
};

【讨论】：

【解决方案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; },
        []
    );

【讨论】：