MUIX数据网格事件在INIT上发射而不是之后

Question

background：您好，我正在使用最新的MUI版本材料-UI的React。我在组件文件夹中的单独文件中使用数据网格。我从应用程序调用组件，并使用状态处理添加行。添加了Init 50行。

sissue：当我将

onRowEditStart={console.log("Start")}

＆

onRowEditStop={console.log("stop")}

添加到datagrid组件时，它们仅在页面加载上触发，但是如果我之后编辑列，则不会触发任何事件？

the组件/datagrid.js添加了

如果任何人都有有关此信息的信息，谢谢！

import * as React from 'react';
import { DataGrid, GridToolbar } from '@mui/x-data-grid';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';

export default function Table(props) {

const [rows, setRows] = React.useState(props.rows);

React.useEffect(() => {
    setRows(props.rows);
  }, [props.rows]);

  return (
    <div style={{ width: '100%' }}>
      <Stack
        sx={{ width: '100%', mb: 1 }}
        direction="row"
        alignItems="flex-start"
        columnGap={1}
      >
      </Stack>
      <Box sx={{ height: 400, bgcolor: 'background.paper' }}>
        <DataGrid autoHeight 
        components={{
            Toolbar: GridToolbar,
        }}
        pageSize={25}
        rowsPerPageOptions={[25, 50, 100]}
        onRowEditStart={console.log("Start")}
        onRowEditStop={console.log("stop")}
        experimentalFeatures={{ newEditingApi: true }}
        rows={rows} 
        columns={props.columns} 
        loading={props.rows.length === 0}
        columnGap={1}
        rowHeight={75}
        />
      </Box>
    </div>
  );
}

原因是因为

onRowEditStart

Answer 1

onRowEditStop

接受

。

如果您用以下代码替换代码，则将起作用。

onRowEditStart={() => console.log("Start")}
onRowEditStop={() => console.log("stop")}

通知您的代码差异。

onRowEditStart={console.log("Start")} // evaluated on page load
onRowEditStop={console.log("stop")} // evaluated on page load

通过通过函数（

onRowEditStart={() => console.log("Start")}

），只有在行启动时才会运行。