绑定自定义点击外部关闭hook的ref时react-select的onChange不触发

这不是react-select本身的问题，核心原因出在自定义hook的逻辑设计上：

• 你给document绑定的是捕获阶段的click事件（addEventListener第三个参数为true），触发优先级远高于React的合成事件（包括react-select的onChange）。你点击选项时捕获事件先触发，立刻修改isVisible状态让下拉框卸载，后续的onChange回调还没来得及执行就被打断。
• 当前的handleClick逻辑存在错误：只要点击组件内部就直接toggle isVisible状态，点击选项属于内部点击，会直接关闭下拉框触发重渲染，同样会打断onChange的执行。另外如果react-select使用默认的portal配置，下拉菜单会渲染到body节点下，不在你绑定ref的div内部，点击选项会被识别为「点击外部」直接关闭下拉，也会导致onChange不触发。

1. 修改useCloseOnClickOutside逻辑 #

取消捕获阶段事件绑定，新增点击元素判断，点击下拉选项时不修改显示状态：

import { useState, useRef, useEffect } from 'react';

const useCloseOnClickOutside = (initialState) => {
  const [isVisible, setIsVisible] = useState(initialState);
  const ref = useRef(null);

  useEffect(() => {
    // 修改为冒泡阶段绑定事件
    document.addEventListener('click', handleClick);
    document.addEventListener('touchstart', handleClick);
    return () => {
      document.removeEventListener('click', handleClick);
      document.removeEventListener('touchstart', handleClick);
    };
  },[]);

  const handleClick = (event) => {
    if (!ref.current) return;
    // 点击下拉选项直接跳过处理，不修改下拉状态
    if (event.target.closest('.react-select__option')) return;
    // 点击外部关闭下拉
    if (!ref.current.contains(event.target)) {
      setIsVisible(false);
    } 
    // 仅点击输入框控制区域时才切换下拉状态
    else if (event.target.closest('.dropdown-trigger')) {
      setIsVisible(prev => !prev);
    }
  };

  return {
    ref,
    isVisible,
    setIsVisible
  };
};

export default useCloseOnClickOutside;

2. 修改Dropdown组件 #

给外层div添加标识类名，选中选项后手动关闭下拉：

import React from 'react';
import Select from 'react-select';
import useCloseOnClickOutside from '../../hooks/useCloseOnClickOutside';

const Dropdown = ({handleChange, defaultValue, options, value}) => {
  const {ref, isVisible, setIsVisible} = useCloseOnClickOutside(false);
  return (
    <div ref={ref} className="dropdown-trigger">
      <Select
        options={options}
        onChange={(val) => {
          handleChange(val);
          // 选中后手动关闭下拉
          setIsVisible(false);
        }}
        defaultValue={defaultValue}
        value={value}
        menuIsOpen={isVisible}
        // 如果使用portal渲染下拉，加这行保证节点在当前div内部，contains判断生效
        // menuPortalTarget={ref.current}
      />
    </div>
  );
};

可选优化 #

如果没有特殊的自定义控制需求，完全可以用react-select自带的closeMenuOnSelect和blurInputOnSelect配置实现选中关闭、点击外部关闭的逻辑，不需要自行写hook控制menuIsOpen，稳定性更高。

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