<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 +
重大更改包含在版本 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 Docs - Controlled Selection
Material UI DataTable Change Log on GitHub
版本 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])
);
}
}}
我设置了一个 Code Sandbox with a working demo给你试试
关于reactjs - Material ui 数据网格复选框行选择不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66399667/