如何通过浏览器端jQuery操作react-select下拉框：修改值或触发展开

有没有办法通过浏览器端的jQuery触发react-select下拉框，或是修改其选中值？

平时操作原生select组件时，页面渲染的结构一般是这样的：

<select id="selelct-dropdown">
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

通常可以用非常简单的jQuery代码直接修改原生select的选中值：

$('#select-dropdown').val(1)

但在使用react-select组件时，浏览器渲染完成的页面里根本不存在原生的select和option标签，想知道有没有可行的实现方法。

首先要明确核心逻辑：react-select是完全由React状态驱动的组件，渲染出来的DOM只是状态的可视化投影，直接用jQuery修改真实DOM的属性、类名，根本不会被React的状态系统感知，不仅改不动选中值，还容易造成UI和内部状态不一致的bug。
具体可以用两种稳定的方法实现：

• 不硬改DOM，通过React内部的fiber节点拿到组件的回调方法更新选中值
  这个方法不限制你用jQuery还是原生JS定位DOM元素，核心是绕开直接改DOM的思路，通过React内部的状态通道更新值。react-select本身是受控组件，它的选中值更新完全依赖传入的onChange回调。操作时先给react-select的外层容器加个方便定位的类名，通过DOM节点上挂载的React内部fiber属性，向上遍历找到对应组件的props，直接调用onChange传入目标值即可。示例代码：

  // 可以用jQuery定位react-select的根节点，和日常习惯保持一致
  const selectRoot = $('.custom-react-select-wrapper')[0];
  // 找到DOM上挂载的fiber标识
  const fiberKey = Object.keys(selectRoot).find(key => key.startsWith('__reactFiber$'));
  let fiberNode = selectRoot[fiberKey];
  // 向上遍历匹配带onChange和options属性的react-select props
  while (fiberNode && !(fiberNode.memoizedProps?.onChange && fiberNode.memoizedProps?.options)) {
    fiberNode = fiberNode.return;
  }
  // 构造和组件结构匹配的选中值（注意要带label和value字段，和组件传入的options结构一致）
  const selectedValue = { value: 1, label: 'One' };
  // 直接触发状态更新
  fiberNode.memoizedProps.onChange(selectedValue);
  

• 模拟原生交互触发下拉展开
  如果只是需要点开下拉选择面板，不需要改选中值，可以直接定位到react-select的控制区元素，派发真实的鼠标事件即可。因为react-select的展开逻辑本身就是监听原生的鼠标交互，这种方法的兼容性非常稳定：

  // 模拟点击展开下拉
  $('.react-select__control')[0].dispatchEvent(
    new MouseEvent('mousedown', { bubbles: true })
  );
  

踩坑提醒：不要尝试通过给DOM元素加选中类名、修改内置input的value值的方式改选中态，这类操作做了也会在React下次diff渲染时被直接覆盖，完全起不到作用。

内容的提问来源于stack exchange，提问作者Htoo Yan Naing Kyaw