如何将 editedRows 从 DataGrid MUI 更新到 firebase?
How to update editedRows from DataGrid MUI to firebase?
如何将我刚刚编辑的值更新到 firebase?
到目前为止,这是我从 editRow 中了解到的(如果我错了请纠正我)。
数据网格内部
//Enable edit mode for row and not cell
editMode="row"
//any update you do in the row is stored in this variable so when you finish it overrides
//w/e you had there with editRowsModel value
editRowsModel={editRowsModel}
//Calls for the function that will be handeling the updates and the all the updates into "model"
onEditRowsModelChange={handleEditRowsModelChange}
//For Double Click + Control
//(That way if uses double click by mistake it doesn't enable editMode)
onCellDoubleClick={(params, event) => {
if (!event.ctrlKey) {
event.defaultMuiPrevented = true;
}
}}
常数
//Variable that will hold the edited variable
const [editRowsModel, setEditRowsModel] = React.useState({});
//Edit function
const handleEditRowsModelChange = React.useCallback((model) => {
setEditRowsModel(model);
}, []);
现在,我应该在编辑功能中编辑该行,但我该如何更新到 firebase?
就像我有这个:
const [editRowsModel, setEditRowsModel] = React.useState({});
const handleEditRowsModelChange = React.useCallback((model) => {
setEditRowsModel(model);
console.log(model.uid)
/*
estudiantes.filter( x => {
const temporalQuery = db.collection("usuarios").doc(user.uid).collection("estudiantes").doc(x.uid);
temporalQuery.update({
nombre: model.nombre,
colegio: model.colegio,
grado: model.grado
})
})
*/
}, []);
但是这不起作用,因为我看不到模型中的各个值,因为它只是说“未定义”,否则这会起作用。如何获取模型的各个值?
因为未定义,所以我在尝试该代码时会收到错误消息。
欢迎任何help/tips。
模型如何记录
console.log(model)
console.log(model.name)
console.log(model[0].name)
我不确定我是否正确理解你的问题,但如果你想访问编辑行数据,你可以这样做:
const [editRowsModel, setEditRowsModel] = React.useState({});
const [editRowData, setEditRowData] = React.useState({});
const handleEditRowsModelChange = React.useCallback(
(model) => {
const editedIds = Object.keys(model);
// user stops editing when the edit model is empty
if (editedIds.length === 0) {
alert(JSON.stringify(editRowData, null, 4));
// update on firebase
} else {
setEditRowData(model[editedIds[0]]);
}
setEditRowsModel(model);
},
[editRowData]
);
console.log(editRowData);
return (
<div style={{ height: 300, width: "100%" }}>
<DataGrid
rows={rows}
columns={columns}
editMode="row"
editRowsModel={editRowsModel}
onEditRowsModelChange={handleEditRowsModelChange}
/>
</div>
);
现场演示
如何将我刚刚编辑的值更新到 firebase? 到目前为止,这是我从 editRow 中了解到的(如果我错了请纠正我)。
数据网格内部
//Enable edit mode for row and not cell
editMode="row"
//any update you do in the row is stored in this variable so when you finish it overrides
//w/e you had there with editRowsModel value
editRowsModel={editRowsModel}
//Calls for the function that will be handeling the updates and the all the updates into "model"
onEditRowsModelChange={handleEditRowsModelChange}
//For Double Click + Control
//(That way if uses double click by mistake it doesn't enable editMode)
onCellDoubleClick={(params, event) => {
if (!event.ctrlKey) {
event.defaultMuiPrevented = true;
}
}}
常数
//Variable that will hold the edited variable
const [editRowsModel, setEditRowsModel] = React.useState({});
//Edit function
const handleEditRowsModelChange = React.useCallback((model) => {
setEditRowsModel(model);
}, []);
现在,我应该在编辑功能中编辑该行,但我该如何更新到 firebase? 就像我有这个:
const [editRowsModel, setEditRowsModel] = React.useState({});
const handleEditRowsModelChange = React.useCallback((model) => {
setEditRowsModel(model);
console.log(model.uid)
/*
estudiantes.filter( x => {
const temporalQuery = db.collection("usuarios").doc(user.uid).collection("estudiantes").doc(x.uid);
temporalQuery.update({
nombre: model.nombre,
colegio: model.colegio,
grado: model.grado
})
})
*/
}, []);
但是这不起作用,因为我看不到模型中的各个值,因为它只是说“未定义”,否则这会起作用。如何获取模型的各个值?
因为未定义,所以我在尝试该代码时会收到错误消息。
欢迎任何help/tips。
模型如何记录
console.log(model)
console.log(model.name)
console.log(model[0].name)
我不确定我是否正确理解你的问题,但如果你想访问编辑行数据,你可以这样做:
const [editRowsModel, setEditRowsModel] = React.useState({});
const [editRowData, setEditRowData] = React.useState({});
const handleEditRowsModelChange = React.useCallback(
(model) => {
const editedIds = Object.keys(model);
// user stops editing when the edit model is empty
if (editedIds.length === 0) {
alert(JSON.stringify(editRowData, null, 4));
// update on firebase
} else {
setEditRowData(model[editedIds[0]]);
}
setEditRowsModel(model);
},
[editRowData]
);
console.log(editRowData);
return (
<div style={{ height: 300, width: "100%" }}>
<DataGrid
rows={rows}
columns={columns}
editMode="row"
editRowsModel={editRowsModel}
onEditRowsModelChange={handleEditRowsModelChange}
/>
</div>
);