react mui/x-data-grid onSelectionChange - 未跟踪/调用

Question

我试图允许从表中选择 ID 列表

这是我的公用表代码

    import { DataGrid, GridColDef } from '@mui/x-data-grid';
    import React, { useState, useEffect } from 'react';
    
    
    interface CommonTableProps {
        rows: any[];
        columns: GridColDef[];
        onSelectionChange: (selectionModel: number[] ) => void; // Add this line
    }
    
     
    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
                    onSelectionChange={onSelectionChange} // Add this line
                />
            </div>
        );
    };
    
    export default CommonTable;


this is How I try to add them in the Contact.tsx 

const Contact: React.FC = () => {
  const [contacts, setContacts] = useState<ContactPerson[]>([]);
  const [newContact, setNewContact] = useState<ContactPerson>({id: 0 , name: '', phoneNumber: '' });
  const [selectedIds, setSelectedIds] = useState<number[]>([]); // State to track selected contact IDs


  const handleDeleteContacts = async () => {
    console.log('deelte soon');
    console.log(selectedIds);

    try {
      await restApiPost('/contacts/delete/bulk', selectedIds);
      // Filter out the deleted contacts
      setContacts(contacts.filter(contact => !selectedIds.includes(contact.id)));
      setSelectedIds([]); // Reset the selection
    } catch (error) {
      console.error('Error deleting contacts:', error);
    }
  };
....
....






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

这是删除应该发生的地方

  <Button variant="primary" onClick={handleDeleteContacts}>
    Delete
  </Button>
  <div className="contact-list" style={{  marginTop: '-100px', marginLeft: '-200px', padding: '20px' }}> 
            <CommonTable
        rows={contacts}
        columns={columns}
        onSelectionChange={handleRowSelectionChange} // Pass the callback
      />
  </div>

问题是在 Selected / Check 事件上的方法 选择更改时 好像没叫过

Answer 1

检查CommonTable组件： 确保 onSelectionChange 回调正确连接到 CommonTable 内 DataGrid 组件的 onSelectionChange 属性。您已经在代码中完成了此操作，但仔细检查总是好的。

CommonTable 控制台登录： 在 CommonTable 组件内部，您可以添加 console.log 语句来检查 onSelectionChange 回调是否被触发。例如：

const CommonTable: React.FC<CommonTableProps> = ({ rows, columns, onSelectionChange }) => {
const handleSelectionChange = (selectionModel: any) => {
    console.log("Selection changed:", selectionModel);
    onSelectionChange(selectionModel);
};

return (
    <div style={{ marginTop: '100px', marginLeft: '200px', padding: '20px' }}>
        <DataGrid
            rows={rows}
            columns={columns}
            pageSize={5}
            rowsPerPageOptions={[5]}
            checkboxSelection
            onSelectionModelChange={handleSelectionChange} // Use onSelectionModelChange
        />
    </div>
);

};