React中点击父元素触发第三方Select组件的onChange事件

针对你无法修改外部库MyCustomSelect组件、需要扩大其可点击区域的需求，提供以下几种可行方案：

方案1：纯CSS实现（最简单，无JS依赖） #

通过CSS内边距和元素占满设置扩展点击区域，无需修改JS逻辑：

/* 包裹Select的div */
[data-testid="language-select"] {
  position: relative;
  /* 自定义需要扩大的点击区域大小，上下左右各加10px */
  padding: 10px;
  cursor: pointer;
}

/* 让Select占满整个div的空间 */
#language-selector {
  width: 100%;
}

原理：给div添加内边距扩大可交互范围，同时让Select组件占满div宽度，点击div的内边距区域时，事件会自然传递给下方的Select组件。

方案2：触发Select内部的下拉触发元素（适配第三方组件结构） #

如果CSS方案无效，可通过定位Select内部实际触发下拉的DOM元素来模拟点击：

<div 
  data-testid="language-select"
  onClick={() => {
    // 找到Select内部的下拉触发容器（需根据实际组件调整选择器，示例以react-select为例）
    const selectTrigger = document.getElementById('language-selector').querySelector('.react-select__control');
    // 触发点击事件展开下拉
    selectTrigger?.click();
  }}
>
  {/* 你的MyCustomSelect组件 */}
</div>

注意：需要根据MyCustomSelect的实际DOM结构调整选择器（查看组件渲染后的class或标签），这种方法依赖组件内部结构，若组件更新可能失效。

方案3：受控状态控制下拉展开（最可靠，需组件支持） #

如果MyCustomSelect支持受控属性（比如isOpen、onMenuClose），可以通过状态直接控制下拉的展开/收起：

import { useState } from 'react';

// ...

const [isSelectOpen, setIsSelectOpen] = useState(false);

// ...

<div 
  data-testid="language-select"
  onClick={() => setIsSelectOpen(!isSelectOpen)}
>
  <MyCustomSelect
    id="language-selector"
    isOpen={isSelectOpen}
    onMenuClose={() => setIsSelectOpen(false)}
    options={languageList.map(({ locale, title }) => ({
      value: locale,
      children: title,
    }))}
    value={currentLocale}
    onChange={({ target: { value } }) => {
      global.location.replace(resolveUrl(value));
    }}
  />
</div>

这种方法完全基于组件API，稳定性最高，前提是第三方组件提供了受控展开的相关属性。

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