Saya tahu cara untuk menambah kotak pilihan atau medan teks ialah menggunakan renderCell dan ia berfungsi, saya dapat melihat kotak pilihan:
Walau bagaimanapun, saya tidak faham bagaimana saya harus mengawal kotak semak/medan teks setiap baris secara individu. Sebagai contoh, bagaimana jika saya mahu baris 1 mempunyai varian "isi" bagi TextField dan baris 2 mempunyai varian "garis besar"?
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>
);
}
Saya cuba menambah <Checkbox /> ，其中包含诸如 <Checkbox defaultChecked/> baharu seperti prop, tetapi sudah tentu, itu tidak berjaya.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Sila lihat contoh yang saya berikan untuk anda. Harap saya boleh jawab soalan awak. 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> ); }