React select自定义下拉选项图标点击与默认点击事件冲突如何解决？

解决方案 #

你遇到的是典型的事件冒泡问题：点击按钮时的点击事件会向上传递到外层的components.Option组件，触发它自带的默认选中逻辑。你只需要在按钮的点击回调中阻止事件冒泡即可，修改后的代码如下：

export const SvdSrchSelectOpt = (props : any) =>
{
  return (
    <components.Option {...props} >
      <Styld.Div >
        <div className="flex-auto w-full">{props.label}</div>
        <div className="container flex ml-auto justify-end">
          <Button 
            variant='noBorder' 
            onClick={(e) => {
              // 阻止事件冒泡到上层Option组件
              e.stopPropagation();
              // 执行编辑逻辑，加可选链避免未传方法时报错
              props.onEdit?.();
            }}
            icon="writing-editing" 
            className='max-w-35p justify-items-center'>
          </Button>
          <Button 
            variant='noBorder' 
            onClick={(e) => {
              e.stopPropagation();
              props.onDelete?.();
            }}
            icon="TrashMessaging" 
            className='max-w-35p justify-items-center'>
          </Button>
        </div>
      </Styld.Div>
    </components.Option >
  );
};

如果你的Button组件的onClick回调还会透传原生事件，部分场景下可以额外加e.preventDefault()避免异常行为，一般只用e.stopPropagation()就足够满足需求。

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