Material ui datagrid 复选框行选择不起作用

Question

 <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，只有当我单击行时才会发生选择，如果我单击复选框则不会发生选择

Answer 1

"@mui/x-data-grid": "^6.2.1"

onSelectionModelChange就是现在onRowSelectionModelChange。来自 DataGrid API 文档：

当一行或多行的选择状态发生变化时触发回调。

签名

function(
    rowSelectionModel: GridRowSelectionModel, 
    details: GridCallbackDetails 
) => void  

欲了解更多信息，请查看此处的文档

v4.0.0-alpha.34 +

版本中包含了重大更改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>
  )
}

更新了代码沙盒上的演示

Material UI 文档 - 受控选择

GitHub 上的 Material UI DataTable 更改日志

版本 4.0.0-alpha.21：

代替

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>
  )
}

尝试onRowSelected，如下所示：

onSelectionChange={(newSelection) => {
    console.log(newSelection)
}}

如果您想跟踪所有行的选择状态，您应该使用以下命令：

onRowSelected={(GridRowSelectedParams) => {
    console.log(GridRowSelectedParams);
}}

我设置了一个带有工作演示的代码沙盒供您尝试