Reactjs 我可以在材质ui数据网格中初始化复选框选择吗？

在材质ui中，通过

checkboxSelection

属性添加复选框选择，并通过

onSelectionChange

收听选择更改，非常容易：

<DataGrid
  columns={columns}
  rows={rows}
  pageSize={10}
  checkboxSelection
  onSelectionChange={e => console.log(e.rows)} />

console.log（e.rows）}/>

---

但是，是否还有一种方法可以使用一组选中的项目初始化复选框选择？

将

selectionModel

道具传递到

DataGrid

。它是您希望在开始时选择的行的ID数组

const行=[
{id:1，姓氏：“斯诺”，姓氏：“乔恩”，年龄：35}，
{id:2，姓：“兰尼斯特”，名：“瑟曦”，年龄：42}，
{id:3，姓：“兰尼斯特”，名：“詹姆”，年龄：45}，
{id:4，姓：“斯塔克”，姓：“雅利娅”，年龄：16}，
{id:5，姓氏：“Targryen”，姓氏：“Daenerys”，年龄：null}，
{id:6，姓氏：“Melisandre”，姓氏：空，年龄：150}，
{id:7，姓：“克利福德”，名：“费拉拉”，年龄：44}，
{id:8，姓：“弗朗西斯”，名：“罗西尼”，年龄：36}，
{id:9，姓：“Roxie”，名：“Harvey”，年龄：65}
];
函数MyDataGrid（）{
//选择任何大于40的字符
const selectionModel=rows.filter（（r）=>r.age>40）.map（（r）=>r.id）
返回(
);
}

现场演示

---

旧答案 您可以通过调用

GridApi.selectRows（id）

来更新行的选择状态<代码>GridApi实例可从访问。但是，

apiRef

是一种企业特性，不能直接在

DataGrid

中使用。幸运的是，您可以使用以下方法从

ComponentParams

访问它：

const apiRef=React.useRef（null）；
...
{
如果（！apiRef.current）{
apiRef.current=参数api.current；
}
不返回任何行；
}
}}
{...}
/>

初始化

GridApi

后，可以像下面这样通过编程方式更改默认行选择

const apiRef=React.useRef（null）；
常量{data}=usedemdata({
数据集：“商品”，
行长：10，
最大列数：6
});
React.useffect（（）=>{
const rows=apiRef.current？.getRowModels（）；
常量selectedds=[]；
行数？.forEach（（r）=>{
如果（r.数量>20000）{
选择edids.push（r.id）；
}
});
apiRef.current？.selectRows（selectedIds）；
}，[数据]；

现场演示

import*作为“React”中的React；
进口{
数据网格，
行数据，
useRows，
useApiRef，
GridApi，
}从“@物料界面/数据网格”；
从“@material ui/x-grid-data-generator”导入{usedemigata}”；
设i=0；
导出默认函数ControlledSelectionGrid（）{
const apiRef=React.useRef（null）；
console.log（“apiRef:”，apiRef）；
const ObjRef=React.useRef({
数据资源：{
列：[]，
行：[]
}
})
const counterRef=React.useRef({
渲染计数：0
})
//待办事项：https://github.com/mui-org/material-ui-x/issues/246
const[selection，setSelection]=React.useState（[]）；
常量列=[
{字段：“id”，标题名：“id”，宽度：70}，
{字段：“名字”，标题名：“名字”，宽度：130}，
{字段：“姓氏”，标题名：“姓氏”，宽度：130}，
{
字段：“年龄”，
头名：“年龄”，
键入：“数字”，
宽度：90，
},
{
字段：“全名”，
头名：“全名”，
description:“此列具有值getter，不可排序。”，
可排序：false，
宽度：160，
估价师：（参数）=>
`${params.getValue（“firstName”）| |“”}${
params.getValue（“lastName”）||“
}`,
},
];
常量行=[
{id:1，姓氏：“斯诺”，姓氏：“乔恩”，年龄：35}，
{id:2，姓：“兰尼斯特”，名：“瑟曦”，年龄：42}，
{id:3，姓：“兰尼斯特”，名：“詹姆”，年龄：45}，
{id:4，姓：“斯塔克”，姓：“雅利娅”，年龄：16}，
{id:5，姓氏：“Targryen”，姓氏：“Daenerys”，年龄：null}，
{id:6，姓氏：“Melisandre”，姓氏：空，年龄：150}，
{id:7，姓：“克利福德”，名：“费拉拉”，年龄：44}，
{id:8，姓：“弗朗西斯”，名：“罗西尼”，年龄：36}，
{id:9，姓：“Roxie”，名：“Harvey”，年龄：65}，
];
//log（'dataRe out:'，ObjRef.current.dataRe）
React.useffect（（）=>{
常数dataRe={
柱，
排
}
ObjRef.current.dataRe=dataRe
counterRef.current.renderCount+=1
console.log（'render**:'的编号，countref.current.renderCount）
console.log（'apiRef.current**:'，apiRef.current）
//console.log（'in useffect..'）
const rowModels=apiRef？.current？.getRowModels（）；
log（“rowModels:”，rowModels）；
console.log（'dataRe'，dataRe）
if（行模型！=未定义）{
if（apiRef.电流）{
apiRef.current.setRowModels(
rowModels.map（（r）=>{
//console.log（“rowModel行：”，r）；
r、 所选=r.data.age>40；
返回r；
})
);
}
}
}，[apiRef.当前]；
返回(
{
setSelection（newSelection.rows）；
}}
组成部分={{
noRowsOverlay：（参数）=>{
//log（'noRowsOverlay中的参数：'，参数）
如果（！apiRef.current）{
//console.log（'在apiRef current noRowsOverlay'中）
apiRef.current=参数api.current；
//console.log（'apiRef.current in noRowOverlay:'，apiRef.current）
}
不返回任何行；
},
}}
{…ObjRef.current.dataRe}
/>
);
}

DataGrid有一个

selectionModel

属性，该属性接受行ID数组

<DataGrid
  columns={columns}
  rows={rows}
  pageSize={10}
  checkboxSelection
  onSelectionChange={e => console.log(e.rows)}
  selectionModel={[rowId1, rowId2, rowId3]}
/>

console.log（e.rows）}
selectionModel={[rowId1，rowId2，rowId3]}
/>

这看起来像是要显示这一点，但似乎仍然是一个有待解决的问题。我建议对该问题进行升级表决：。这是否仍然有效？当我尝试此解决方案时，我得到一个错误“setRowModels为n

<DataGrid
  columns={columns}
  rows={rows}
  pageSize={10}
  checkboxSelection
  onSelectionChange={e => console.log(e.rows)}
  selectionModel={[rowId1, rowId2, rowId3]}
/>