react-select自定义Option组件内嵌可点击图标onClick事件失效如何解决

问题原因 #

1. 你当前的onClick写法是直接调用console.log("clicked")，相当于把函数执行后的返回值（undefined）绑定给点击事件，所以组件渲染（下拉菜单打开）时就会直接执行打印逻辑，点击时反而没有对应事件触发。
2. react-select 内置的 Option 组件默认会处理点击事件实现选中逻辑，内部元素的点击事件会冒泡到上层 Option 容器，被默认逻辑拦截，导致自定义的图标点击无法生效。

解决方法 #

修改事件绑定方式，同时阻止点击事件冒泡即可，参考代码如下：

import { components } from 'react-select';

const Option = props => {
  // 定义图标点击处理函数
  const handleIconClick = (e) => {
    // 阻止事件冒泡，避免触发Option默认的选中行为
    e.stopPropagation();
    // 这里写你的收藏逻辑
    console.log("clicked");
  };

  return (
    <components.Option {...props}>
      <p>Text</p>
      {/* 绑定函数引用，不要直接执行 */}
      <IonIcon onClick={handleIconClick} style={{ cursor: 'pointer' }} />
    </components.Option>
  );
};

补充说明 #

如果你选择完全自定义div结构而不使用内置的components.Option，只要按照上面的方法修正事件绑定、添加阻止冒泡逻辑，也能正常触发图标点击事件。不需要设置极高的zIndex，只要确保图标没有被其他元素遮挡即可，额外添加cursor: pointer样式可以提升交互体验。

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