reactjs 如何在MUI数据网格中使用下拉选择实现单元格更新?

smdnsysy  于 2022-12-22  发布在  React
关注(0)|答案(1)|浏览(208)

对于更新列中的单元格,我使用“type:“数据网格”列定义中的“singleSelect”和“valueOptions”。

const columns = [
    {
      field: "id",
      headerName: "ID",
      sortable: true,
      maxWidth: 80,
      flex: 1,
    },
    { field: "date", headerName: "Date", flex: 1, maxWidth: 120 },
    {
      field: "source",
      headerName: "Source",
      type: "string",
      sortable: false,
      flex: 1,
      maxWidth: 120
    },
    {
      field: "status",
      headerName: "Status",
      flex: 1,
      editable: true,
      type: "singleSelect",
      valueOptions: [
        { value: 1, label: " " },
        { value: "Confirmed", label: "Confirmed" },
        { value: "Didn't answer", label: "Didn't answer" },
        { value: "Received", label: "Received" },
        { value: "Duplicated", label: "Duplicated" },
        { value: "Complaint", label: "Complaint" },
      ],

如何获取单元格的行id和更新值并通过axios发送到服务器?
我使用React Material UI社区版v5。
我试过renderCell来使用Select组件,但是看起来很难看

rdrgkggo

rdrgkggo1#

数据网格有一个名为"onCellEditCommit"的prop。您可以将axios函数添加到其中,它将从编辑过的单元格中传递更新后的行数据。

const sendToServer = async(data) => {
    // send to server logic
}
<DataGrid
    onCellEditCommit={sendToServer}
    ...
/>

从MUI数据网格API:https://mui.com/x/api/data-grid/data-grid/#props:~:text=onCellEditCommit,for%20this%20callback.

相关问题