Heim > Fragen und Antworten > Hauptteil
Ich weiß, dass man mit renderCell ein Kontrollkästchen oder ein Textfeld hinzufügen kann, und es funktioniert, ich kann das Kontrollkästchen sehen:
Allerdings verstehe ich nicht, wie ich das Kontrollkästchen/Textfeld jeder Zeile einzeln steuern soll. Was wäre zum Beispiel, wenn ich möchte, dass Zeile 1 die Variante „Füllung“ des TextFields und Zeile 2 die Variante „Umriss“ hat?
import * as React from "react"; import {DataGrid} from "@mui/x-data-grid"; import {Box, Checkbox, TextField} from "@mui/material"; const columns = [ {field: "id", headerName: "ID", width: 30}, {field: "col1", headerName: "Column 1", width: 150}, {field: "col2", headerName: "Column 2", width: 150}, {field: "col3", headerName: "Column 3", width: 150, renderCell: (params) => <Checkbox />}, ]; const rows = [ {id: 1, col1: "Example", col2: "Content", col3: ??????}, {id: 2, col1: "Example", col2: "Content", col3: ??????}, {id: 3, col1: "Example", col2: "Content", col3: ??????}, ]; export default function Table() { return ( <Box sx={{}}> <DataGrid rows={rows} columns={columns} /> </Box> ); }
Ich habe versucht, eine neue <Checkbox />
,其中包含诸如 <Checkbox defaultChecked/>
ähnliche Requisite hinzuzufügen, aber das hat natürlich nicht funktioniert.
P粉4028061752024-03-30 00:33:52
请看一下我为您提供的示例。希望我能回答你的问题。 https://codesandbox.io/s/optimistic-leaf-xm32lk ?file=/Demo.tsx
import * as React from "react"; import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid"; import Checkbox from "@mui/joy/Checkbox"; function RenderCheckBox(props: GridRenderCellParams<any, boolean>) { const [checked, setChecked] = React.useState(props.value); // Initiated react binded value with param from `rows` // Handler for user clicks to set checkbox mark or unset it const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => { setChecked(event.target.checked); }; //The bind for dynamic mark/unmark: checked={checked} //The handler for user clicks: onChange={handleChange} return ( <Checkbox label="some text" size="lg" checked={checked} onChange={handleChange} /> ); } const columns: GridColDef[] = [ { field: "id", headerName: "ID", width: 30 }, { field: "col1", headerName: "Column 1", width: 150 }, { field: "col2", headerName: "Column 2", width: 150 }, { field: "checked", headerName: "Column 3", width: 150, renderCell: RenderCheckBox } ]; // Here 'checked' field will pass the param to component. const rows = [ { id: 1, col1: "Example", col2: "Content", checked: true }, { id: 2, col1: "Example", col2: "Content", checked: false }, { id: 3, col1: "Example", col2: "Content", checked: false } ]; export default function RenderCellGrid() { return ( <div style={{ height: 300, width: "100%" }}> <DataGrid rows={rows} columns={columns} /> </div> ); }