如何获取Datagrid中列可见性变化的更新Schema.(UI)材料?

Question

在参考事件的Datagrid文档时，我发现columnVisibilityChange可用于检测各种列可见性更改。但是当我将它包含在我的DataGrid组件中时，当我显示/隐藏列时，它似乎不会被触发。下面是我检测触发器的方法:

export default function DataGridDemo(props) {
let { updateSelections } = props;
updateSelections =
updateSelections || (() => console.log('Update Selections Not Configured'));
return (
<div
style={{ height: '100%', width: '100%' }}
className={classes.DataGridComponents}>
<DataGrid
rows={props.data || rows}
columns={props.schema || columns}
components={{
Toolbar: CustomToolbar,
Footer: GridFooter,
}}
className={classes.root}
checkboxSelection
disableSelectionOnClick
scrollbarSize={5}
pageSize={props.pageSize || 10}
rowsPerPageOptions={[10]}
density={props.density || 'compact'}
onSelectionModelChange={updateSelections}
columnVisibilityChange={(params) => {
console.log(`Column State Changed: ${params}`);
}}
selectionChange={() => console.log('selection change')}
/>
</div>
);
}

这里出了什么问题?

Answer 1

为了使用事件侦听器，必须添加on并将事件侦听器术语大写。修改我的代码从:

columnVisibilityChange={(params) => {
console.log(`Column State Changed: ${params}`);
}}

onColumnVisibilityChange={(params) => {
console.log(`Column State Changed: ${params}`);
}}

为我工作。