select组件从点击到展开发生了哪些事情

[Stream-web]

Select 组件点击事件深度分析

基于 @rc-component/select 源码的点击事件处理机制完整解析

🎯 概述

Select 组件的点击事件处理是一个复杂的多层协作过程，涉及事件捕获、状态管理、UI 更新等多个环节。本文档将深入分析整个点击事件的处理流程。

🏗️ 事件处理架构

组件层级与职责

用户点击
    ↓
BaseSelect Container (onMouseDown)
    ↓  
Selector (onClick + onMouseDown)
    ↓
SingleSelector / MultipleSelector
    ↓
SelectTrigger (配置 Trigger)
    ↓
Trigger Component (外部库)
    ↓
弹窗显示/隐藏

📋 关键组件分析

1. Selector 组件 - 事件入口

文件: src/Selector/index.tsx

onClick 事件处理

const onClick = ({ target }) => {
  if (target !== inputRef.current) {
    // 如果点击的不是输入框，则聚焦到输入框
    const isIE = (document.body.style as any).msTouchAction !== undefined;
    if (isIE) {
      setTimeout(() => {
        inputRef.current.focus();
      });
    } else {
      inputRef.current.focus();
    }
  }
};

职责:

• 确保点击选择器时输入框获得焦点
• 处理 IE 浏览器的兼容性问题

onMouseDown 事件处理 (核心逻辑)

const onMouseDown: React.MouseEventHandler<HTMLElement> = (event) => {
  const inputMouseDown = getInputMouseDown();

  // 阻止默认行为的条件判断
  if (
    event.target !== inputRef.current &&
    !inputMouseDown &&
    !(mode === 'combobox' && disabled)
  ) {
    event.preventDefault();
  }

  // 核心切换逻辑
  if ((mode !== 'combobox' && (!showSearch || !inputMouseDown)) || !open) {
    if (open && autoClearSearchValue !== false) {
      onSearch('', true, false);  // 清空搜索值
    }
    onToggleOpen();  // 切换下拉状态
  }
};

关键判断条件解析:

1. 阻止默认行为的条件:

   • event.target !== inputRef.current: 点击的不是输入框
   • !inputMouseDown: 输入框没有被按下
   • !(mode === 'combobox' && disabled): 不是禁用的 combobox 模式

2. 触发切换的条件:

   • 非 combobox 模式: mode !== 'combobox' && (!showSearch || !inputMouseDown)
   • 或者当前关闭状态: !open

2. BaseSelect 组件 - 状态管理

文件: src/BaseSelect/index.tsx

onToggleOpen 函数

const onToggleOpen = React.useCallback(
  (newOpen?: boolean) => {
    const nextOpen = newOpen !== undefined ? newOpen : !mergedOpen;

    if (!disabled) {
      setInnerOpen(nextOpen);  // 更新内部状态

      if (mergedOpen !== nextOpen) {
        onPopupVisibleChange?.(nextOpen);  // 通知外部
      }
    }
  },
  [disabled, mergedOpen, setInnerOpen, onPopupVisibleChange],
);

职责:

• 计算下一个开关状态
• 更新内部状态 setInnerOpen
• 通知外部状态变化 onPopupVisibleChange

onInternalMouseDown 事件

const onInternalMouseDown: React.MouseEventHandler<HTMLDivElement> = (event, ...restArgs) => {
  const { target } = event;
  const popupElement: HTMLDivElement = triggerRef.current?.getPopupElement();

  // 处理弹窗内点击的焦点管理
  if (popupElement && popupElement.contains(target as HTMLElement)) {
    const timeoutId = setTimeout(() => {
      // 清理逻辑...
      if (!mobile && !popupElement.contains(document.activeElement)) {
        selectorRef.current?.focus();  // 重新聚焦到选择器
      }
    });
  }

  onMouseDown?.(event, ...restArgs);  // 调用外部传入的 onMouseDown
};

职责:

• 处理弹窗内点击的焦点管理
• 确保在移动端和桌面端的正确行为

3. SelectTrigger 组件 - 弹窗控制

文件: src/SelectTrigger.tsx

<Trigger
  {...restProps}
  showAction={onPopupVisibleChange ? ['click'] : []}
  hideAction={onPopupVisibleChange ? ['click'] : []}
  popupVisible={visible}
  onPopupVisibleChange={onPopupVisibleChange}
>
  {children}
</Trigger>

关键配置:

• showAction=['click']: 点击时显示弹窗
• hideAction=['click']: 点击时隐藏弹窗
• popupVisible={visible}: 控制弹窗显示状态
• onPopupVisibleChange: 状态变化回调

4. useSelectTriggerControl Hook - 外部点击处理

文件: src/hooks/useSelectTriggerControl.ts

React.useEffect(() => {
  function onGlobalMouseDown(event: MouseEvent) {
    if (propsRef.current?.customizedTrigger) {
      return;  // 自定义触发器时跳过
    }

    let target = event.target as HTMLElement;

    // Shadow DOM 支持
    if (target.shadowRoot && event.composed) {
      target = (event.composedPath()[0] || target) as HTMLElement;
    }

    // 检查是否点击在组件外部
    if (
      propsRef.current.open &&
      elements()
        .filter((element) => element)
        .every((element) => !element.contains(target) && element !== target)
    ) {
      propsRef.current.triggerOpen(false);  // 关闭下拉框
    }
  }

  window.addEventListener('mousedown', onGlobalMouseDown);
  return () => window.removeEventListener('mousedown', onGlobalMouseDown);
}, []);

职责:

• 监听全局鼠标按下事件
• 判断点击是否在组件外部
• 支持 Shadow DOM
• 点击外部时关闭下拉框

🔄 完整事件流程

流程图

sequenceDiagram
    participant User as 👤 用户
    participant Container as BaseSelect Container
    participant Selector as Selector 组件
    participant BaseSelect as BaseSelect 逻辑
    participant SelectTrigger as SelectTrigger
    participant Trigger as Trigger组件
    participant Global as 全局监听

    Note over User: 点击选择器
    User->>Container: onMouseDown 事件
    Container->>Container: onInternalMouseDown 处理
    Container->>Selector: 事件传递
    
    Selector->>Selector: onClick 处理焦点
    Selector->>Selector: onMouseDown 核心逻辑
    
    alt 满足切换条件
        Selector->>BaseSelect: 调用 onToggleOpen()
        BaseSelect->>BaseSelect: 计算 nextOpen 状态
        BaseSelect->>BaseSelect: setInnerOpen(nextOpen)
        BaseSelect->>SelectTrigger: 传递 visible 属性
        SelectTrigger->>Trigger: 更新 popupVisible
        Trigger->>User: 显示/隐藏下拉框
        
        opt 状态确实改变
            BaseSelect->>BaseSelect: onPopupVisibleChange?.(nextOpen)
        end
    end

    Note over Global: 用户点击外部区域
    User->>Global: 点击外部
    Global->>Global: onGlobalMouseDown 检查
    alt 点击在组件外部
        Global->>BaseSelect: triggerOpen(false)
        BaseSelect->>SelectTrigger: visible = false
        SelectTrigger->>Trigger: popupVisible = false
        Trigger->>User: 隐藏下拉框
    end

Loading

详细步骤

1. 事件捕获阶段

   // BaseSelect Container
   <div onMouseDown={onInternalMouseDown}>
     // Selector
     <div onClick={onClick} onMouseDown={onMouseDown}>

2. 条件判断阶段

   // 在 Selector 的 onMouseDown 中
   if ((mode !== 'combobox' && (!showSearch || !inputMouseDown)) || !open) {
     // 执行切换逻辑
   }

3. 状态更新阶段

   // 在 BaseSelect 的 onToggleOpen 中
   const nextOpen = newOpen !== undefined ? newOpen : !mergedOpen;
   setInnerOpen(nextOpen);

4. UI 更新阶段

   // SelectTrigger 传递给 Trigger
   <Trigger popupVisible={visible} />

🎛️ 不同模式的行为差异

1. Single Mode (单选模式)

// 条件: mode !== 'combobox' && (!showSearch || !inputMouseDown)
// 行为: 点击任何地方都会切换下拉状态

特点:

• 点击选择器区域即可切换
• 不区分是否点击输入框
• 选择选项后自动关闭

2. Multiple Mode (多选模式)

// 条件: mode !== 'combobox' && (!showSearch || !inputMouseDown)  
// 行为: 与单选模式类似，但选择后不自动关闭

特点:

• 点击选择器区域切换
• 选择选项后保持打开状态
• 支持多个标签显示

3. Tags Mode (标签模式)

// 条件: mode !== 'combobox' && (!showSearch || !inputMouseDown)
// 行为: 继承多选行为，额外支持输入创建

特点:

• 继承多选模式的点击行为
• 支持输入框输入创建新标签
• Enter 键或失焦时创建标签

4. Combobox Mode (下拉输入框模式)

// 条件: !open (只有关闭时才切换)
// 行为: 更注重输入框交互

特点:

• 只有在关闭状态时点击才打开
• 输入框获得焦点时自动打开
• 输入内容会直接成为选中值

🔍 关键判断逻辑深度解析

核心判断条件

if ((mode !== 'combobox' && (!showSearch || !inputMouseDown)) || !open) {
  onToggleOpen();
}

这个条件可以拆解为两部分：

第一部分: mode !== 'combobox' && (!showSearch || !inputMouseDown)

含义: 非 combobox 模式下的点击判断

• mode !== 'combobox': 不是下拉输入框模式
• !showSearch: 没有搜索功能时，任何点击都响应
• !inputMouseDown: 有搜索功能但没有点击输入框时响应

逻辑分析:

// 情况1: 无搜索功能的单选/多选/标签模式
if (mode !== 'combobox' && !showSearch) {
  // 任何点击都切换状态
}

// 情况2: 有搜索功能但点击的不是输入框
if (mode !== 'combobox' && showSearch && !inputMouseDown) {
  // 点击选择器其他区域切换状态，点击输入框不切换
}

第二部分: !open

含义: 当前处于关闭状态

• 无论什么模式，关闭状态下点击都会打开
• 这确保了用户始终能够打开下拉框

阻止默认行为的逻辑

if (
  event.target !== inputRef.current &&
  !inputMouseDown &&
  !(mode === 'combobox' && disabled)
) {
  event.preventDefault();
}

目的: 防止不必要的默认浏览器行为

• event.target !== inputRef.current: 不是点击输入框
• !inputMouseDown: 输入框没有被按下
• !(mode === 'combobox' && disabled): 不是禁用的 combobox

🛠️ 兼容性处理

1. IE 浏览器兼容

const isIE = (document.body.style as any).msTouchAction !== undefined;
if (isIE) {
  setTimeout(() => {
    inputRef.current.focus();
  });
} else {
  inputRef.current.focus();
}

问题: IE 浏览器的焦点处理有时序问题
解决: 使用 setTimeout 延迟执行

2. Shadow DOM 支持

if (target.shadowRoot && event.composed) {
  target = (event.composedPath()[0] || target) as HTMLElement;
}

问题: Shadow DOM 中的事件目标可能不准确
解决: 使用 composedPath() 获取真实目标

3. 移动端适配

if (!mobile && !popupElement.contains(document.activeElement)) {
  selectorRef.current?.focus();
}

问题: 移动端的焦点行为与桌面端不同
解决: 根据设备类型采用不同策略

🎯 性能优化

1. 事件处理优化

const onToggleOpen = React.useCallback(
  (newOpen?: boolean) => {
    // 逻辑...
  },
  [disabled, mergedOpen, setInnerOpen, onPopupVisibleChange],
);

优化: 使用 useCallback 缓存事件处理函数

2. 状态变化检查

if (mergedOpen !== nextOpen) {
  onPopupVisibleChange?.(nextOpen);
}

优化: 只在状态真正改变时才触发回调

3. 延迟处理

const timeoutId = setTimeout(() => {
  // 焦点管理逻辑
});

优化: 使用 setTimeout 避免同步执行带来的问题

🐛 常见问题与解决方案

1. 点击不响应

可能原因:

• 事件被其他元素拦截
• 条件判断不满足
• 组件处于禁用状态

排查方法:

console.log('mode:', mode);
console.log('showSearch:', showSearch);  
console.log('inputMouseDown:', inputMouseDown);
console.log('open:', open);
console.log('disabled:', disabled);

2. 焦点问题

可能原因:

• 浏览器兼容性问题
• 移动端焦点行为差异
• Shadow DOM 影响

解决方案:

• 检查浏览器类型
• 使用适当的焦点策略
• 处理 Shadow DOM 事件

3. 外部点击无法关闭

可能原因:

• 全局事件监听器未正确设置
• 元素判断逻辑错误
• Shadow DOM 干扰

解决方案:

• 检查 useSelectTriggerControl 的元素数组
• 确认事件目标判断逻辑
• 处理 Shadow DOM 场景

📊 事件处理性能分析

事件触发频率

事件类型	触发频率	性能影响
onClick	低	几乎无
onMouseDown	低	几乎无
onGlobalMouseDown	中	轻微
onPopupVisibleChange	低	轻微

优化建议

1. 减少不必要的重渲染

   const memoizedHandler = React.useCallback(handler, deps);

2. 批量状态更新

   React.unstable_batchedUpdates(() => {
     setInnerOpen(nextOpen);
     // 其他状态更新
   });

3. 事件委托

   // 使用全局事件监听器而不是每个元素单独监听

🔧 自定义扩展

1. 自定义点击行为

const customOnMouseDown = (event) => {
  // 自定义逻辑
  if (customCondition) {
    return; // 阻止默认行为
  }
  
  // 调用原始处理函数
  originalOnMouseDown(event);
};

2. 添加额外的触发条件

const enhancedCondition = (mode, showSearch, inputMouseDown, open, customFlag) => {
  const originalCondition = (mode !== 'combobox' && (!showSearch || !inputMouseDown)) || !open;
  return originalCondition && customFlag;
};

3. 自定义外部点击处理

const useCustomTriggerControl = (elements, open, triggerOpen, customLogic) => {
  React.useEffect(() => {
    const handler = (event) => {
      if (customLogic(event)) {
        triggerOpen(false);
      }
    };
    
    window.addEventListener('mousedown', handler);
    return () => window.removeEventListener('mousedown', handler);
  }, []);
};

📝 总结

Select 组件的点击事件处理是一个精心设计的多层协作系统：

核心特点

1. 分层处理: 不同层级负责不同职责
2. 模式适配: 针对不同模式有不同的处理逻辑
3. 兼容性: 处理各种浏览器和设备差异
4. 性能优化: 使用缓存和批量更新等优化手段

设计亮点

1. 清晰的职责分离: 每个组件只处理自己的逻辑
2. 灵活的条件判断: 复杂但准确的触发条件
3. 完善的边界处理: 考虑各种边界情况和异常场景
4. 良好的扩展性: 支持自定义和扩展

学习价值

这个点击事件处理系统展示了企业级组件库在处理复杂交互时的设计思路和实现技巧，是学习 React 组件设计的优秀范例。

---

参考文件:

• src/Selector/index.tsx - 主要事件处理逻辑
• src/BaseSelect/index.tsx - 状态管理和协调
• src/SelectTrigger.tsx - 弹窗控制配置
• src/hooks/useSelectTriggerControl.ts - 外部点击处理

创建时间: $(date)
版本: @rc-component/select v1.1.4

[Stream-web]

mini版本的select组件
import React, { useState, useRef, useEffect } from 'react';
import './MiniSelect.css';

// 基础类型定义
export interface OptionType {
label: React.ReactNode;
value: string | number;
disabled?: boolean;
}

export interface MiniSelectProps {
// 基础属性
value?: string | number | (string | number)[];
defaultValue?: string | number | (string | number)[];
placeholder?: string;
disabled?: boolean;

// 选项
options?: OptionType[];
children?: React.ReactNode;

// 模式
mode?: 'single' | 'multiple';

// 搜索
showSearch?: boolean;
filterOption?: boolean | ((input: string, option: OptionType) => boolean);

// 样式
className?: string;
style?: React.CSSProperties;

// 事件
onChange?: (value: any, option: OptionType | OptionType[]) => void;
onSelect?: (value: string | number, option: OptionType) => void;
onDeselect?: (value: string | number, option: OptionType) => void;
onSearch?: (value: string) => void;
}

// Option 组件
export const Option: React.FC<{
value: string | number;
disabled?: boolean;
children: React.ReactNode;
}> = ({ children }) => {
// 这个组件主要用于 JSX 语法，实际逻辑在 Select 中处理
return <>{children}</>;
};

// 主要的 MiniSelect 组件
const MiniSelect: React.FC = ({
value: controlledValue,
defaultValue,
placeholder = '请选择',
disabled = false,
options = [],
children,
mode = 'single',
showSearch = false,
filterOption = true,
className = '',
style,
onChange,
onSelect,
onDeselect,
onSearch,
}) => {
// 状态管理
const [open, setOpen] = useState(false);
const [searchValue, setSearchValue] = useState('');
const [internalValue, setInternalValue] = useState<string | number | (string | number)[]>(
controlledValue ?? defaultValue ?? (mode === 'multiple' ? [] : undefined)
);

// 引用
const containerRef = useRef(null);
const inputRef = useRef(null);

// 计算当前值
const currentValue = controlledValue !== undefined ? controlledValue : internalValue;
const isMultiple = mode === 'multiple';

// 从 children 中解析选项
const parsedOptions: OptionType[] = React.useMemo(() => {
if (options.length > 0) {
return options;
}

const childOptions: OptionType[] = [];
React.Children.forEach(children, (child) => {
  if (React.isValidElement(child) && child.type === Option) {
    childOptions.push({
      value: child.props.value,
      label: child.props.children,
      disabled: child.props.disabled,
    });
  }
});
return childOptions;

}, [options, children]);

// 过滤选项
const filteredOptions = React.useMemo(() => {
if (!showSearch || !searchValue) {
return parsedOptions;
}

return parsedOptions.filter((option) => {
  if (typeof filterOption === 'function') {
    return filterOption(searchValue, option);
  }
  if (filterOption === false) {
    return true;
  }
  // 默认过滤逻辑
  return String(option.label).toLowerCase().includes(searchValue.toLowerCase());
});

}, [parsedOptions, searchValue, showSearch, filterOption]);

// 获取显示的标签
const getDisplayLabel = (val: string | number): React.ReactNode => {
const option = parsedOptions.find(opt => opt.value === val);
return option?.label || val;
};

// 获取显示文本
const displayText = React.useMemo(() => {
if (isMultiple) {
const values = Array.isArray(currentValue) ? currentValue : [];
if (values.length === 0) return placeholder;
return values.map(val => getDisplayLabel(val)).join(', ');
} else {
return currentValue !== undefined ? getDisplayLabel(currentValue) : placeholder;
}
}, [currentValue, isMultiple, placeholder, parsedOptions]);

// 检查选项是否被选中
const isSelected = (optionValue: string | number): boolean => {
if (isMultiple) {
const values = Array.isArray(currentValue) ? currentValue : [];
return values.includes(optionValue);
}
return currentValue === optionValue;
};

// 处理选项点击
const handleOptionClick = (optionValue: string | number, option: OptionType) => {
if (option.disabled) return;

let newValue: string | number | (string | number)[];

if (isMultiple) {
  const values = Array.isArray(currentValue) ? [...currentValue] : [];
  const index = values.indexOf(optionValue);
  
  if (index > -1) {
    // 取消选择
    values.splice(index, 1);
    newValue = values;
    onDeselect?.(optionValue, option);
  } else {
    // 添加选择
    values.push(optionValue);
    newValue = values;
    onSelect?.(optionValue, option);
  }
} else {
  newValue = optionValue;
  onSelect?.(optionValue, option);
  setOpen(false); // 单选模式下选择后关闭
}

// 更新值
if (controlledValue === undefined) {
  setInternalValue(newValue);
}
onChange?.(newValue, isMultiple ? parsedOptions.filter(opt => 
  Array.isArray(newValue) && newValue.includes(opt.value)
) : option);

// 清空搜索
if (!isMultiple) {
  setSearchValue('');
}

};

// 处理选择器点击
const handleSelectorClick = () => {
if (disabled) return;

if (showSearch && open) {
  // 如果已经打开且有搜索功能，聚焦到输入框
  inputRef.current?.focus();
} else {
  // 切换开关状态
  setOpen(!open);
}

};

// 处理搜索输入
const handleSearchChange = (e: React.ChangeEvent) => {
const value = e.target.value;
setSearchValue(value);
onSearch?.(value);

if (!open) {
  setOpen(true);
}

};

// 处理键盘事件
const handleKeyDown = (e: React.KeyboardEvent) => {
switch (e.key) {
case 'Escape':
setOpen(false);
break;
case 'Enter':
if (!open) {
setOpen(true);
}
break;
}
};

// 点击外部关闭
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
setOpen(false);
setSearchValue('');
}
};

if (open) {
  document.addEventListener('mousedown', handleClickOutside);
  return () => document.removeEventListener('mousedown', handleClickOutside);
}

}, [open]);

// 渲染多选标签
const renderMultipleTags = () => {
if (!isMultiple || !Array.isArray(currentValue)) return null;

return (
  <div className="mini-select-tags">
    {currentValue.map((val) => {
      const option = parsedOptions.find(opt => opt.value === val);
      return (
        <span key={val} className="mini-select-tag">
          <span className="mini-select-tag-label">{getDisplayLabel(val)}</span>
          <span 
            className="mini-select-tag-close"
            onClick={(e) => {
              e.stopPropagation();
              handleOptionClick(val, option!);
            }}
          >
            ×
          </span>
        </span>
      );
    })}
  </div>
);

};

return (
<div
ref={containerRef}
className={mini-select ${className} ${disabled ? 'mini-select-disabled' : ''} ${open ? 'mini-select-open' : ''}}
style={style}
onKeyDown={handleKeyDown}
tabIndex={disabled ? -1 : 0}
>
{/* 选择器 */}

{isMultiple ? (
<>
{renderMultipleTags()}
{showSearch && (
<input
ref={inputRef}
className="mini-select-search-input"
value={searchValue}
onChange={handleSearchChange}
placeholder={Array.isArray(currentValue) && currentValue.length > 0 ? '' : placeholder}
disabled={disabled}
onClick={(e) => e.stopPropagation()}
/>
)}
</>
) : (
<>
{showSearch && open ? (

) : (
<span className={mini-select-selection-item ${currentValue === undefined ? 'mini-select-placeholder' : ''}}>
{displayText}

)}
</>
)}

    {/* 箭头 */}
    <span className={`mini-select-arrow ${open ? 'mini-select-arrow-up' : ''}`}>
      ▼
    </span>
  </div>

  {/* 下拉选项 */}
  {open && (
    <div className="mini-select-dropdown">
      <div className="mini-select-dropdown-content">
        {filteredOptions.length === 0 ? (
          <div className="mini-select-empty">暂无数据</div>
        ) : (
          filteredOptions.map((option) => (
            <div
              key={option.value}
              className={`mini-select-option ${isSelected(option.value) ? 'mini-select-option-selected' : ''} ${option.disabled ? 'mini-select-option-disabled' : ''}`}
              onClick={() => handleOptionClick(option.value, option)}
            >
              <span className="mini-select-option-content">
                {option.label}
              </span>
              {isSelected(option.value) && (
                <span className="mini-select-option-checkmark">✓</span>
              )}
            </div>
          ))
        )}
      </div>
    </div>
  )}
</div>

);
};

// 添加 Option 到 MiniSelect
(MiniSelect as any).Option = Option;

export default MiniSelect;