React中实现可点击区域全覆盖的下拉选择组件

要让整个选项区域点击即可选中对应单选选项，核心是让单选按钮的触发范围覆盖整个选项容器，推荐以下两种方式：

方式一：利用Material-UI的FormControlLabel组件（推荐） #

FormControlLabel组件本身支持点击标签区域触发单选/复选框的选中状态，只需将整个选项内容放入FormControlLabel中，并设置样式让它占满父容器：

修改ListSubOptionItem组件：

import { FormControlLabel, Radio } from '@mui/material';

const ListSubOptionItem = ({ label, value, activeOption, onChange }) => {
  return (
    <FormControlLabel
      control={
        <Radio 
          checked={activeOption === value} 
          value={value} 
          onChange={onChange} 
        />
      }
      label={
        // 这里可以放入选项的所有内容，比如图标、描述文本等
        <div style={{ width: '100%' }}>
          {label}
          {/* 其他自定义内容 */}
        </div>
      }
      sx={{ 
        width: '100%', 
        padding: '0.5rem 1rem', 
        cursor: 'pointer',
        '&:hover': { backgroundColor: '#f5f5f5' } // 可选：添加 hover 反馈
      }}
    />
  );
};

这种方式会自动处理点击事件，同时保留Material-UI的无障碍特性（比如键盘导航）。

方式二：给选项容器添加点击事件 #

如果需要更自定义的布局，可以给选项的外层容器添加点击事件，手动触发单选按钮的选中逻辑：

import { Radio } from '@mui/material';

const ListSubOptionItem = ({ label, value, activeOption, onChange }) => {
  const handleContainerClick = () => {
    // 模拟单选按钮的 onChange 事件
    onChange({ target: { value } });
  };

  return (
    <div 
      onClick={handleContainerClick}
      style={{
        width: '100%',
        padding: '0.5rem 1rem',
        display: 'flex',
        alignItems: 'center',
        cursor: 'pointer',
        gap: '0.5rem'
      }}
    >
      <Radio 
        checked={activeOption === value} 
        value={value} 
        onChange={onChange} 
      />
      <span>{label}</span>
      {/* 其他自定义内容 */}
    </div>
  );
};

注意：这种方式需要确保点击容器时不会和单选按钮的点击事件冲突，不过上面的代码中，单选按钮的onChange会被正常触发，容器的点击事件只是额外触发一次状态更新，不会有问题。

最后，确保父组件的RadioGroup的onChange函数能正确接收并更新activeOption状态，这样整个选项区域点击后就能同步选中状态。

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