MUI Select组件内IconButton点击事件无法触发的解决方法

问题核心是事件冒泡：点击IconButton时，事件会向上传递到父级的MenuItem，而MenuItem的点击事件会被Select组件捕获，触发下拉菜单的选择/关闭逻辑，同时覆盖了IconButton自身的点击事件。

解决方法 #

在IconButton的onClick回调中添加event.stopPropagation()，阻止事件向上冒泡，确保仅触发自身的点击逻辑：

<Select
  onChange={event => {
    // 原有逻辑
  }}
  value={mode}
  variant='outlined'
>
  {modes.map(m => (
    <MenuItem
      key={m.key}
      value={m.value}
    >
      {m.label}
      <IconButton
        onClick={(event) => {
          event.stopPropagation(); // 阻止事件冒泡到MenuItem
          alert('Clicked!');
        }}
      >
        <HelpIcon />
      </IconButton>
    </MenuItem>
  ))}
</Select>

原理说明 #

stopPropagation()会阻止React合成事件的向上传递，这样点击IconButton时，事件不会触发MenuItem的点击处理逻辑，也就不会触发Select组件的下拉相关行为，仅执行IconButton自身的alert操作。

内容的提问来源于stack exchange，提问作者simen-andresen