React MUI X DataGrid onSelectionChange未触发/调用问题

核心问题分析 #

你当前的代码中，CommonTable组件直接将父组件的onSelectionChange回调传给了MUI DataGrid的同名属性，但MUI DataGrid的onSelectionChange回调参数并非直接是选中ID数组，而是包含selectionModel属性的对象。这导致你的handleRowSelectionChange接收的参数不符合预期，看起来像是回调未触发。

具体修复步骤 #

1. 修正CommonTable组件中DataGrid的回调逻辑

修改CommonTable内的DataGrid配置，正确提取选中的ID数组并传递给父组件：

const CommonTable: React.FC<CommonTableProps> = ({ rows, columns, onSelectionChange }) => {
    return (
        <div style={{ marginTop: '100px', marginLeft: '200px', padding: '20px' }}>
            <DataGrid
                rows={rows}
                columns={columns}
                pageSize={5}
                rowsPerPageOptions={[5]}
                checkboxSelection
                // 修正：从params中提取selectionModel传递给父组件
                onSelectionChange={(params) => onSelectionChange(params.selectionModel as number[])}
            />
        </div>
    );
};

2. 确保行数据的唯一标识字段正确

MUI DataGrid默认使用id作为行的唯一标识，若你的ContactPerson对象的ID字段不是id（比如contactId），需要手动配置getRowId属性：

<DataGrid
    // 其他属性不变
    getRowId={(row) => row.id} // 替换为你的行数据实际ID字段
/>

如果ID字段不匹配，DataGrid无法正确跟踪选中状态，也会导致回调异常。

3. 验证父组件回调逻辑

确认Contact组件中的handleRowSelectionChange逻辑正确，参数类型匹配：

const handleRowSelectionChange = (selectionModel: number[] ) => {
    setSelectedIds(selectionModel);
    console.log("Selected IDs:", selectionModel);
};

完成以上修改后，勾选表格行时onSelectionChange回调应该能正常触发，selectedIds也会正确更新选中的ID列表。

内容的提问来源于stack exchange，提问作者Hard Worker