React中如何检测是否点击了react-select组件的内部或外部区域？

以下三种方案都可以实现你要的点击区域判断需求： #

方案1：绑定Ref判断点击区域（最推荐） #

不需要依赖id，直接给Select组件绑定Ref拿到根DOM元素，全局监听点击事件时判断目标节点是否在该DOM范围内即可：

import { useRef, useEffect } from 'react';
import Select from 'react-select';

// 组件内部逻辑
const selectRef = useRef(null);

useEffect(() => {
  const handleClickCheck = (e) => {
    if (selectRef.current?.contains(e.target)) {
      console.log('点击在select组件区域内');
      // 内点击对应逻辑
    } else {
      console.log('点击在select组件区域外');
      // 外点击对应逻辑
    }
  };
  // 绑定全局点击监听
  document.addEventListener('mousedown', handleClickCheck);
  // 组件卸载时移除监听避免内存泄漏
  return () => document.removeEventListener('mousedown', handleClickCheck);
}, []);

// 组件渲染时绑定ref
<Select
  defaultValue={defaultValue}
  options={options}
  styles={selectStyle()}
  onFocus={onFocus}
  onChange={onChange}
  placeholder={placeholder}
  value={value}
  ref={selectRef}
/>

如果你使用的是v3及以下的旧版本react-select，把上面的ref属性改成innerRef即可正常绑定。

方案2：外层包裹容器加id #

如果一定要用id做识别标识，可以直接在Select外层套一层带自定义id的容器，判断逻辑针对外层容器执行即可：

<div id="custom-select-123">
  <Select
    defaultValue={defaultValue}
    options={options}
    styles={selectStyle()}
    onFocus={onFocus}
    onChange={onChange}
    placeholder={placeholder}
    value={value}
  />
</div>

点击判断逻辑示例：

document.addEventListener('mousedown', (e) => {
  const selectWrap = document.getElementById('custom-select-123');
  if (selectWrap?.contains(e.target)) {
    // 内点击逻辑
  } else {
    // 外点击逻辑
  }
})

方案3：自定义react-select根组件传入id #

你之前直接传id不生效，是因为react-select默认会把id挂载到内部隐藏的input元素上，而非组件根容器。你可以通过自定义根组件的方式把id放到根容器上：

<Select
  defaultValue={defaultValue}
  options={options}
  styles={selectStyle()}
  onFocus={onFocus}
  onChange={onChange}
  placeholder={placeholder}
  value={value}
  components={{
    Control: ({ children, ...rest }) => <div id="123" {...rest}>{children}</div>
  }}
/>

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