Material UI ToggleButtonGroup如何实现2行2列排列 内嵌Grid时onChange失效

问题原因 #

ToggleButtonGroup的onChange事件基于事件委托实现，仅能监听直接子级ToggleButton的点击事件。你在ToggleButtonGroup和ToggleButton之间嵌套了Grid组件作为中间层，导致事件无法被捕获，因此回调不会触发。

实现方案 #

不需要额外嵌套Grid组件，直接给ToggleButtonGroup配置CSS Grid布局即可实现2行2列效果，同时保证事件正常触发：

import { useState } from 'react';
import { Box, Typography, ToggleButtonGroup, ToggleButton, Stack } from '@mui/material';

// 组件内部逻辑
const [testTime, setTestTime] = useState<string | null>('1');

const handleTestTime = (event: React.MouseEvent<HTMLElement>, newTime: string | null) => {
  console.log(newTime);
  setTestTime(newTime);    
};

// 渲染部分
<Box>
  <Typography variant="body2">
    Toggle Button
  </Typography>
  <ToggleButtonGroup 
    value={testTime}
    exclusive 
    onChange={handleTestTime}
    sx={{
      display: 'grid',
      gridTemplateColumns: 'repeat(2, 1fr)', // 固定2列等宽布局
      gap: 8, // 对应原Grid spacing={1}的间距，可按需调整
      width: '100%' // 撑满父容器宽度
    }}
  >
    <ToggleButton value="earlymorning">
      <Stack direction={{ xs: 'column' }}>
        <Typography variant="body2">凌晨</Typography>
      </Stack>
    </ToggleButton>
    <ToggleButton value="morning">
      <Stack direction={{ xs: 'column' }}>
        <Typography variant="body2">上午</Typography>
      </Stack>
    </ToggleButton>
    <ToggleButton value="afternoon">
      <Stack direction={{ xs: 'column' }}>
        <Typography variant="body2">下午</Typography>
      </Stack>
    </ToggleButton>
    <ToggleButton value="evening">
      <Stack direction={{ xs: 'column' }}>
        <Typography variant="body2">晚上</Typography>
      </Stack>
    </ToggleButton>
  </ToggleButtonGroup>
</Box>

如果需要更复杂的响应式布局，也可以单独给每个ToggleButton设置宽度、间距等样式，不需要引入Grid组件破坏ToggleButtonGroup的事件委托机制。

内容的提问来源于stack exchange，提问作者Abhijit Desai