我在使用 Material-UI DataGrid 组件时遇到问题,特别是与单元格编辑和更新网格中的值有关。我尝试了几种不同的方法,但似乎都没有达到预期的效果
这是我到目前为止所做的尝试:
方法一:使用renderEditCell
在这种方法中,我实现了 renderEditCell 函数来呈现可编辑的文本字段。但是,我面临两个问题:
一次只能输入一个字符,每输入一个字符后数值都会重置。 DataGrid 不显示键入的值。 这是我的这种方法的代码片段:
// My function
const handleEditCellChange = (params) => {
// const updatedRows = [...AssignmentData];
// updatedRows[params.id][params.field] = params.value;
// setAssignmentData(updatedRows);
console.log(params);
// Update the comment in the AssignmentData and make an API call to update the comment on the server.
const updatedRows = [...AssignmentData];
const rowIndex = updatedRows.findIndex((row) => row.id === params.id);
updatedRows[rowIndex][params.field] = params.value;
}
// My column rendering
{
field: 'teacher_comment',
headerName: 'Teacher Comment',
width: 300,
editable: true,
renderEditCell: (params) => {
return <TextField
variant="outlined"
size="small"
value={params.value}
fullWidth
onChange={(e) =>
handleCommentChange(params.row.id, 'teacher_comment', e.target.value)
}
/>
;
},
方法 2:创建自定义编辑组件
在这种方法中,我创建了一个自定义编辑组件来处理单元格编辑。但是,我遇到了错误“TypeError:apiRef.current.setEditCellValue不是函数”,并且无法更新AssignmentData状态下的值。这是此代码的片段:
// My Function
function CustomEditComponent(props) {
const { id, value, field, hasFocus } = props;
const apiRef = useGridApiRef();
const ref = React.useRef();
React.useLayoutEffect(() => {
if (hasFocus) {
ref.current.focus();
}
}, [hasFocus]);
const handleValueChange = (event) => {
const newValue = event.target.value; // The new value entered by the user
apiRef.current.setEditCellValue({ id, field, value: newValue });
};
return <input ref={ref} type="text" value={value} onChange={handleValueChange} />;
}
// My column rendering
{
field: 'teacher_comment',
headerName: 'Teacher Comment',
width: 300,
editable: true,
renderEditCell: (params) => {
return <CustomEditComponent props={params } />
;
},
},
方法3:默认单元格编辑
在此方法中,我使用 Material-UI DataGrid 支持的默认单元格编辑。但是,该值不会立即更新;它需要再次编辑单元格,然后停止以进行更新。这是此方法的片段:
// My update function
const handleEditCellChange = (params) => {
// const updatedRows = [...AssignmentData];
// updatedRows[params.id][params.field] = params.value;
// setAssignmentData(updatedRows);
console.log(params);
// Update the comment in the AssignmentData and make an API call to update the comment on the server.
const updatedRows = [...AssignmentData];
const rowIndex = updatedRows.findIndex((row) => row.id === params.id);
updatedRows[rowIndex][params.field] = params.value;
}
// My render function
{
field: 'teacher_comment',
headerName: 'Teacher Comment',
width: 300,
editable: true,
},
// My datagrid
<DataGrid
rows={AssignmentData}
columns={columns}
pageSize={15}
rowHeight={50}
checkboxSelection={false}
pagination={true}
autoPageSize={false}
sortModel={sortModel}
onSortModelChange={(newModel) => setSortModel(newModel)}
onCellEditStop={(params) => handleEditCellChange(params)}
disableNavigation={true}
/>
我将非常感谢任何指导或解决方案来解决这些问题并在 Material-UI DataGrid 中实现平滑的单元格编辑和值更新。预先感谢您的帮助!
我在第一种方法中找到了解决方案。
{
field: "teacher_comment",
headerName: "Teacher Comment",
width: 300,
editable: true,
renderEditCell: (params) => {
return (
<TextField
variant="outlined"
size="small"
value={params.value}
fullWidth
onChange={(e) => {
// Update the value in the cell
const updatedValue = e.target.value;
params.api.setEditCellValue({
id: params.id,
field: params.field,
value: updatedValue,
});
// Calling function to update the state and call api
handleEditCellChange({ ...params, value: updatedValue });
}}
/>
);
},
},
我必须使用
params.api.setEditCellValue
才能正确更新值。
之前以任何方法都没有成功,因为我正在遵循文档并通过
apiRef
进行调用,这在我的情况下不起作用。
我希望我能有良好的声誉来给你的答案竖起大拇指。 不费力气就可以了。