Reactjs 使用MaterialUI复选框从行中获取用户ID值

我正在尝试创建一个方法来获取数据网格中复选框的用户ID。我有基本方法，但我不确定如何获取表的iterated/map列的行的userID，以便在单击按钮更新角色时使用它

我在他们的网站上浏览了materialUI checkbox API文档，可以看到它与handleChangeCheckbox方法有关。但是，我无法理解它如何获取该行的id/first userID值的逻辑。这可以更简单地通过将值放入字段beofre来实现吗？当选择多个复选框时，如何将复选框的值收集到一个数组中

    const [userList, setUserList] = useState({
        userLists: [],
        username: ``,
        userEmail: ``,
        userFirstName: ``,
        userSurname: ``,
        userRoleID: null,
        checked: []
    })

......

    const [checked, setChecked] = React.useState(true);

    const handleChangeCheckbox = (event) => {
        setChecked(event.target.checked);
    };

    const [selectionModel, setSelectionModel] = React.useState([]);

    const dispatch = useDispatch();

    useEffect(() => {
        dispatch(requireAllUserData());
    }, [])

    const handleExpandClick = () => {
        const {state} = this
        setUserList({...state,expanded: !state.expanded})
    };

    function handleSubmitUserRoleSchool(e: React.FormEvent<HTMLFormElement>, userID) {
        e.preventDefault();
        const formData = new FormData();
        formData.append("userRoleID", userList.userRoleID);
        formData.append("userID", userList.userID);
        axios.put(`http://localhost:5002/api/admin/updateroleschool/${userID}`, formData);
    }

    function handleSubmitUserRoleAdmin(e: React.FormEvent<HTMLFormElement>, userID) {
        e.preventDefault();
        const formData = new FormData();
        formData.append("userRoleID", userList.userRoleID);
        formData.append("userID", userList.userID);
        axios.put(`http://localhost:5002/api/admin/updateroleadmin/${userID}`, formData);
    }

    const columns = [
        { field: 'id', headerName: 'ID', width: 70 },
        { field: 'firstname', headerName: 'First name', width: 130 },
        { field: 'lastName', headerName: 'Last name', width: 130 },
        { field: 'userName', headerName: 'Username', width: 130},
        { field: 'userEmail', headerName: 'Email', width: 180 },
        { field: 'userRole', headerName: 'Role', width: 80}
    ];

    const rows =userLists.map(user=>({

        id: user.userID,
        firstname: user.userFirstName,
        lastName: user.userSurname,
        userName: user.username,
        userEmail: user.userEmail,
        userRole: user.userRoleID_FK1.userRoleName }));

    return (

        <div style={{ height: 400, width: '100%' }}>
           <DataGrid
               rows={rows}
               columns={columns}
               pageSize={10}
               checkboxSelection={userList.userID}
               onSelectionModelChange={(newSelection) => {
                   setSelectionModel(newSelection.selectionModel);
               }}
               selectionModel={selectionModel}
               {...userLists}/>
            <ButtonGroup size="small" aria-label="small outlined button group">
                <Button onClick={handleSubmitUserRoleSchool}>School Update</Button>
                <Button onClick={handleSubmitUserRoleAdmin}>Admin Update</Button>
                <Button onClick={handleSubmitUserDelete}>Delete User</Button>
                <Button onClick={handleSubmitUserDeleteAll}>Delete All</Button>
            </ButtonGroup>
        </div>
    );
}

const[userList，setUserList]=useState({
用户列表：[]，
用户名：``，
用户电子邮件：``，
userFirstName:``，
用户名：```，
userRoleID:null，
选中：[]
})
......
const[checked，setChecked]=React.useState（true）；
常量handleChangeCheckbox=（事件）=>{
setChecked（event.target.checked）；
};
const[selectionModel，setSelectionModel]=React.useState（[]）；
const dispatch=usedpatch（）；
useffect（（）=>{
调度（requireAllUserData（））；
}, [])
常量handleExpandClick=（）=>{
const{state}=这个
setUserList（{…状态，扩展：！状态.扩展}）
};
函数handleSubmitUserRoleSchool（e:React.FormEvent，userID）{
e、 预防默认值（）；
const formData=new formData（）；
append（“userRoleID”，userList.userRoleID）；
append（“userID”，userList.userID）；
axios.put(`http://localhost:5002/api/admin/updateroleschool/${userID}`，formData）；
}
函数handleSubmitUserRoleAdmin（e:React.FormEvent，userID）{
e、 预防默认值（）；
const formData=new formData（）；
append（“userRoleID”，userList.userRoleID）；
append（“userID”，userList.userID）；
axios.put(`http://localhost:5002/api/admin/updateroleadmin/${userID}`，formData）；
}
常量列=[
{字段：'id'，标题名称：'id'，宽度：70}，
{字段：'firstname'，标题名称：'firstname'，宽度：130}，
{字段：'lastName'，标题名称：'lastName'，宽度：130}，
{字段：'userName'，标题名称：'userName'，宽度：130}，
{字段：'userEmail'，标题名称：'Email'，宽度：180}，
{字段：'userRole'，标题名称：'Role'，宽度：80}
];
const rows=userLists.map（用户=>({
id:user.userID，
firstname:user.userFirstName，
lastName:user.username，
用户名：user.userName，
userEmail:user.userEmail，
userRole:user.userRoleID_FK1.userRoleName}）；
返回(
{
setSelectionModel（newSelection.selectionModel）；
}}
selectionModel={selectionModel}
{…用户列表}/>
学校更新
管理更新
删除用户
全部删除
);
}