如何为react-select组件添加id属性？怎样监听react-select点击事件

解决id属性不生效问题 #

react-select 传递的id prop默认会绑定到内部隐藏的原生input元素，不会挂载到外层容器div上，所以你在外层元素上找不到对应的id属性，在开发者工具中直接搜索id值即可看到它存在于内部input标签上。
如果需要将id挂载到外层容器，可通过自定义Control组件实现，代码示例：

import Select, { components } from 'react-select';

// 自定义Control组件，挂载外层id
const CustomControl = (props) => {
  return <components.Control {...props} id="your-custom-id" />;
};

// 组件调用
<Select
  defaultValue={defaultValue}
  options={options}
  styles={selectStyle()}
  onFocus={onFocus}
  onChange={onChange}
  placeholder={placeholder}
  value={value}
  components={{ Control: CustomControl }}
/>

如果仅需要给内部input设置id，原有inputProps={{ id: 'fieldId' }}的写法已经生效，不需要额外调整。

判断点击在组件内部/外部的方案 #

该需求不需要依赖id属性实现，更简单的方案如下：

方法1：通过ref绑定根节点判断（推荐） #

给Select外层包裹一个普通div，绑定ref后直接判断点击目标是否在该节点范围内即可：

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

function YourComponent() {
  const selectWrapRef = useRef(null);

  useEffect(() => {
    const handleGlobalClick = (e) => {
      if (selectWrapRef.current?.contains(e.target)) {
        // 点击发生在select内部的逻辑
        console.log('内部点击');
      } else {
        // 点击发生在select外部的逻辑
        console.log('外部点击');
      }
    };
    window.addEventListener('click', handleGlobalClick);
    return () => window.removeEventListener('click', handleGlobalClick);
  }, []);

  return (
    <div ref={selectWrapRef}>
      {/* 原有Select组件代码，不需要做任何修改 */}
      <Select
        defaultValue={defaultValue}
        options={options}
        styles={selectStyle()}
        onFocus={onFocus}
        onChange={onChange}
        placeholder={placeholder}
        value={value}
        inputProps={{ id: labelId }}
        id="123"
      />
    </div>
  );
}

方法2：使用组件自带回调 #

如果你的场景仅需要监听下拉框展开/收起的触发时机，可以直接使用react-select自带的回调：

• onMenuOpen：下拉框展开时触发
• onMenuClose：下拉框收起时触发（包含点击外部自动收起的场景）

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