<DataGrid>属性“onCellEditCommit”不起作用

Question

我正在使用

DataGrid

的

Material-UI

组件来显示项目列表。

我想使每行中的每个单元格可编辑然后更改该行的相应项目。

为此目的，我使用

onCellEditCommit

组件上提供的

DataGrid

属性。 但是，当我实际更改单元格的值时，我的事件处理程序不会调用。

我使用以下代码：

 export default function TargetsView(props) {
      const [items] = useContext(TargetsContext);
      const onItemsEnabled = props.onItemsEnabled;

      return (
        <div style={{ height: 300, width: "100%" }}>
          <DataGrid
            disableSelectionOnClick
            onCellEditCommit={(params) => {
              console.log("test");
            }}
            onSelectionModelChange={
              onItemsEnabled
                ? (selectedRows) => {
                    const targetInformation = [];
                    for (let selectedRow of selectedRows)
                      targetInformation.push(items[selectedRow - 1]);
                      onItemsEnabled(targetInformation);
                  }
                : null
            }
            rows={items}
            columns={columns}
            checkboxSelection
            experimentalFeatures={{ newEditingApi: true }}
          />
        </div>
      );
    }

Answer 1

OnCellEditCommit 是旧版编辑 API 的一部分：https://mui.com/x/react-data-grid/editing-legacy/#events

您的代码不应包含以下行：

experimentalFeatures={{ newEditingApi: true}}

 export default function TargetsView(props) {
      const [items] = useContext(TargetsContext);
      const onItemsEnabled = props.onItemsEnabled;

      return (
        <div style={{ height: 300, width: "100%" }}>
          <DataGrid
            disableSelectionOnClick
            onCellEditCommit={(params) => {
              console.log("test");
            }}
            onSelectionModelChange={
              onItemsEnabled
                ? (selectedRows) => {
                    const targetInformation = [];
                    for (let selectedRow of selectedRows)
                      targetInformation.push(items[selectedRow - 1]);
                      onItemsEnabled(targetInformation);
                  }
                : null
            }
            rows={items}
            columns={columns}
            checkboxSelection
          />
        </div>
      );
    }

Answer 2

我相信这已经过时了。尝试使用 processRowUpdate。这将返回整行以及更新后的值。