在我的数据网格中有 9 列，您可以在其中看到名为 Rate 和 Transfer 的两列。我还有一个名为 Total 的列，我想在其中显示 Rate 和 Transfer 的乘法结果以及 Transfer 单元格值的变化。 请注意我已使 Transfer 列可编辑，以便 Total 列的值随传输值而变化。在 DataGrid 中有一个名为 onCellFocusOut() 的道具，它会在您单击单元格外部后为您提供单元格值。但这并没有给你更新的价值。我尝试使用 useEffect() 和 useState() 设置 Transfer 单元格的值并相应地更新 Total 。但它没有用。希望我已经清楚地解释了我想要在这里实现的目标。
我的代码
const Transition = React.forwardRef(function Transition(props, ref) {
return <Slide direction="left" ref={ref} {...props} />;
});
function FullScreenDialog({ open, handleClose }) {
const columns = [
{
field: "Lot",
headerName: "Lot#",
width: 200,
editable: false,
},
{ field: "Bill", headerName: "Bill#", width: 130, editable: false },
{
field: "Shelf",
headerName: "Shelf",
width: 200,
editable: false,
},
{
field: "Bin",
headerName: "Bin",
width: 200,
editable: false,
},
{
field: "Rate",
headerName: "Rate",
width: 200,
editable: false,
},
{
field: "Stock",
headerName: "Stock Balance Qty.",
width: 200,
editable: false,
},
{
field: "Transfer",
headerName: "Transfer Qty.",
width: 200,
editable: true,
},
{
field: "Total",
headerName: "Total",
width: 200,
editable: false,
},
];
// React.useEffect(() => {
// setTotal(rate * transfer);
// console.log("total", total);
// }, [transfer]);
const [transferCellValue, setTransferCellValue] = React.useState(null);
const [total, setTotal] = React.useState(1);
console.log("transfer cell value", transferCellValue);
const defaultRows = [
{
id: 1,
Lot: "2101000134",
Bill: "M0000013092",
Shelf: "W13-A1",
Bin: "B01",
Rate: 221,
Stock: 128.0,
Transfer: 12,
Total: total,
},
];
// console.log(transferCellValue);
return (
<div>
<Dialog
fullScreen
open={open}
onClose={handleClose}
TransitionComponent={Transition}
>
<div style={{ height: 400, width: "100%" }}>
<DataGrid
rows={defaultRows}
columns={columns}
onCellFocusOut={(e) => console.log(e.value)}
/>
</div>
</Dialog>
</div>
);
}
