我是新的MUI和React,试图配置一个行可编辑的DataGrid与编辑和删除操作按钮.我从MUI网站复制了以下代码,并改变了DataGridPro的DataGrid,因为它似乎对我来说,所有的行编辑功能在DataGrid版本也可用.我的理解可能是错误的,请帮助.以下代码显示编辑和删除按钮,但是点击后,该行并没有被改为编辑模式,尽管显示了取消和保存按钮。在将版本改回DataGridPro后,一切都开始按预期工作。
谢了JM
import * as React from "react";
import PropTypes from "prop-types";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import AddIcon from "@mui/icons-material/Add";
import EditIcon from "@mui/icons-material/Edit";
import DeleteIcon from "@mui/icons-material/DeleteOutlined";
import SaveIcon from "@mui/icons-material/Save";
import CancelIcon from "@mui/icons-material/Close";
import {
GridRowModes,
DataGrid,
GridToolbarContainer,
GridActionsCellItem,
} from "@mui/x-data-grid";
import {
randomCreatedDate,
randomTraderName,
randomUpdatedDate,
randomId,
} from "@mui/x-data-grid-generator";
const initialRows = [
{
id: randomId(),
name: randomTraderName(),
age: 25,
dateCreated: randomCreatedDate(),
lastLogin: randomUpdatedDate(),
},
{
id: randomId(),
name: randomTraderName(),
age: 36,
dateCreated: randomCreatedDate(),
lastLogin: randomUpdatedDate(),
},
{
id: randomId(),
name: randomTraderName(),
age: 19,
dateCreated: randomCreatedDate(),
lastLogin: randomUpdatedDate(),
},
{
id: randomId(),
name: randomTraderName(),
age: 28,
dateCreated: randomCreatedDate(),
lastLogin: randomUpdatedDate(),
},
{
id: randomId(),
name: randomTraderName(),
age: 23,
dateCreated: randomCreatedDate(),
lastLogin: randomUpdatedDate(),
},
];
function EditToolbar(props) {
const { setRows, setRowModesModel } = props;
const handleClick = () => {
const id = randomId();
setRows((oldRows) => [...oldRows, { id, name: "", age: "", isNew: true }]);
setRowModesModel((oldModel) => ({
...oldModel,
[id]: { mode: GridRowModes.Edit, fieldToFocus: "name" },
}));
};
return (
<GridToolbarContainer>
<Button color="primary" startIcon={<AddIcon />} onClick={handleClick}>
Add record
</Button>
</GridToolbarContainer>
);
}
EditToolbar.propTypes = {
setRowModesModel: PropTypes.func.isRequired,
setRows: PropTypes.func.isRequired,
};
export default function FullFeaturedCrudGrid() {
const [rows, setRows] = React.useState(initialRows);
const [rowModesModel, setRowModesModel] = React.useState({});
const handleRowEditStart = (params, event) => {
event.defaultMuiPrevented = true;
};
const handleRowEditStop = (params, event) => {
event.defaultMuiPrevented = true;
};
const handleEditClick = (id) => () => {
setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.Edit } });
};
const handleSaveClick = (id) => () => {
setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.View } });
};
const handleDeleteClick = (id) => () => {
setRows(rows.filter((row) => row.id !== id));
};
const handleCancelClick = (id) => () => {
setRowModesModel({
...rowModesModel,
[id]: { mode: GridRowModes.View, ignoreModifications: true },
});
const editedRow = rows.find((row) => row.id === id);
if (editedRow.isNew) {
setRows(rows.filter((row) => row.id !== id));
}
};
const processRowUpdate = (newRow) => {
const updatedRow = { ...newRow, isNew: false };
setRows(rows.map((row) => (row.id === newRow.id ? updatedRow : row)));
return updatedRow;
};
const handleRowModesModelChange = (newRowModesModel) => {
setRowModesModel(newRowModesModel);
};
const columns = [
{ field: "name", headerName: "Name", width: 180, editable: true },
{ field: "age", headerName: "Age", type: "number", editable: true },
{
field: "dateCreated",
headerName: "Date Created",
type: "date",
width: 180,
editable: true,
},
{
field: "lastLogin",
headerName: "Last Login",
type: "dateTime",
width: 220,
editable: true,
},
{
field: "actions",
type: "actions",
headerName: "Actions",
width: 100,
cellClassName: "actions",
getActions: ({ id }) => {
const isInEditMode = rowModesModel[id]?.mode === GridRowModes.Edit;
if (isInEditMode) {
return [
<GridActionsCellItem
icon={<SaveIcon />}
label="Save"
onClick={handleSaveClick(id)}
/>,
<GridActionsCellItem
icon={<CancelIcon />}
label="Cancel"
className="textPrimary"
onClick={handleCancelClick(id)}
color="inherit"
/>,
];
}
return [
<GridActionsCellItem
icon={<EditIcon />}
label="Edit"
className="textPrimary"
onClick={handleEditClick(id)}
color="inherit"
/>,
<GridActionsCellItem
icon={<DeleteIcon />}
label="Delete"
onClick={handleDeleteClick(id)}
color="inherit"
/>,
];
},
},
];
return (
<Box
sx={{
height: 500,
width: "100%",
"& .actions": {
color: "text.secondary",
},
"& .textPrimary": {
color: "text.primary",
},
}}
>
<DataGrid
rows={rows}
columns={columns}
editMode="row"
rowModesModel={rowModesModel}
onRowModesModelChange={handleRowModesModelChange}
onRowEditStart={handleRowEditStart}
onRowEditStop={handleRowEditStop}
processRowUpdate={processRowUpdate}
slots={{
toolbar: EditToolbar,
}}
slotProps={{
toolbar: { setRows, setRowModesModel },
}}
/>
</Box>
);
}
我试着把从MUI网站上复制的代码用于DataGrid,把版本从Pro改为basic。我的假设是,这两个版本的行编辑功能是一样的,代码应该可以很好地用于DataGrid。也许我的理解有误,请指导
1条答案
按热度按时间dfddblmv1#
如果你想传递arrgumment,不要在事件监听器中直接调用函数....使用callback和call函数,如onClick-{()=〉handleEdit(id)}