reactjs - 材料ui datagrid复选框行选择不起作用
问题描述
<DataGrid
className="list"
pagingation
rows={registeredClasses}
columns={this.getColumns()}
pageSize={10}
rowLength={10}
autoHeight
// sortModel={sortModel}
components={{
pagination:CustomPagination
}}
checkboxSelection
onSelectionChange={(newSelection) =>{
console.log(newSelection)
}}
/>
也尝试使用 onSelectionModelChange,仅当我单击行时才会发生选择,如果我单击复选框则不会发生
解决方案
v4.0.0-alpha.34 +
Version 中包含了重大更改v4.0.0-alpha.34
。onRowSelected
已被删除,onSelectionModelChange
现在返回一个包含所选行索引的数组。您可以通过以下方式直接更改选择模型onSelectionModelChange
:
Material UI 文档中的示例:
import * as React from 'react'
import { DataGrid } from '@material-ui/data-grid'
import { useDemoData } from '@material-ui/x-grid-data-generator'
export default function ControlledSelectionGrid() {
const { data } = useDemoData({
dataSet: 'Commodity',
rowLength: 10,
maxColumns: 6,
})
const [selectionModel, setSelectionModel] = React.useState([])
return (
<div style={{ height: 400, width: '100%' }}>
<DataGrid
checkboxSelection
onSelectionModelChange={(newSelectionModel) => {
setSelectionModel(newSelectionModel)
}}
selectionModel={selectionModel}
{...data}
/>
</div>
)
}
GitHub 上的 Material UI DataTable 更改日志
版本 4.0.0-alpha.21:
代替
onSelectionChange={(newSelection) => {
console.log(newSelection)
}}
试试onRowSelected,像这样:
onRowSelected={(GridRowSelectedParams) => {
console.log(GridRowSelectedParams);
}}
如果你想跟踪所有行的选择状态,你应该使用这个:
onSelectionModelChange={(GridSelectionModelChangeParams) => {
// This will return {selections: [selected row indexes]}
console.log(GridSelectionModelChangeParams);
if (Array.isArray(GridSelectionModelChangeParams.selectionModel)) {
// Iterate the selection indexes:
GridSelectionModelChangeParams.selectionModel.forEach(
// Get the row data:
(selection_index) => console.log(rows[selection_index])
);
}
}}
我设置了一个带有工作演示的代码沙箱供您试用
推荐阅读
- azure-pipelines - 根据签出的分支/标签使用不同的 azure 管道模板
- c# - 不理解 SoapAction 标头 - 使用 asmx Web 服务 - 使用自定义绑定 - dot net core 3.1 c# app
- r - 用一个代码获取两个或多个变量的比例
- java - href 中的当前 URL
- tomcat - 错误在 grails-2.2.1 中找不到默认容器
- woocommerce - Woocommerce Rest APi 获取自定义元字段
- html - 在外部单击时如何关闭自动完成下拉菜单?
- reactjs - 使用 React 在 Typescript 中类型检查 props 的最佳实践
- java - 无法使用 G1GC 启动 Solr
- php - 不分析动态包含表达式 require_once($filename)