如何阻止React列表打开下拉后点击外侧触发行点击跳转事件

问题根因 #

你仅在onChange回调中添加了stopPropagation，只有点击下拉选项触发选择操作时才会执行阻止冒泡逻辑。而点击外侧关闭下拉的场景下，事件没有触发onChange回调，点击事件直接冒泡到行容器，因此触发了跳转逻辑。

可行解决方案 #

方案1：通过下拉展开状态拦截行点击（最稳妥，适配所有UI库）

利用下拉组件的展开/关闭状态做拦截，下拉打开时直接跳过行点击的跳转逻辑，无需修改DOM结构或判断事件源。

1. 行组件内新增下拉展开状态

import { useState } from 'react';
// 行组件内部新增状态
const [isDropdownOpen, setIsDropdownOpen] = useState(false);

2. 给Select组件绑定展开/关闭回调（主流UI库的Select组件均支持onOpen/onClose回调，比如Ant Design、Material UI）

const select = () => (
  <Select 
    value={value} 
    onChange={(e) => onChange(e)}
    // 绑定状态更新
    onOpen={() => setIsDropdownOpen(true)}
    onClose={() => setIsDropdownOpen(false)}
  >
    {items.map((option) => (
      <MenuItem className={menuItemClass} key={option.id} value={option.id}>
        {option.name}
      </MenuItem>
    ))}
  </Select>
)

3. 行点击逻辑新增状态判断

const onClickRow = (value, event) => {
  // 下拉展开时直接拦截，不执行跳转逻辑
  if (isDropdownOpen) return;
  setValue(value);
  // 原有跳转逻辑保持不变
};

方案2：通过事件源判断拦截（适合不想额外加状态的场景）

如果你的Select组件弹出层默认渲染在body下（使用Portal），先给Select加上disablePortal={true}属性，让弹出层渲染在行的DOM树内部，之后通过ref判断点击源是否属于下拉组件：

1. 给Select绑定ref

import { useRef } from 'react';
const selectRef = useRef(null);

const select = () => (
  <Select 
    ref={selectRef}
    value={value} 
    onChange={(e) => onChange(e)}
    // 关闭Portal，让弹出层渲染在当前DOM树下
    disablePortal={true}
  >
    {/* 原有选项逻辑不变 */}
  </Select>
)

2. 行点击逻辑新增事件源判断

const onClickRow = (value, event) => {
  // 点击源属于下拉组件时直接拦截
  if (selectRef.current?.contains(event.target)) return;
  setValue(value);
  // 原有跳转逻辑保持不变
};

内容的提问来源于stack exchange，提问作者D. Messier