控制台操作React页面DOM：无法触发搜索事件的问题求助

React用的是合成事件系统，不是直接绑定原生DOM事件，所以你之前直接触发普通change/input事件的方式，没法触发React注册的onChange回调。下面给你两种可行的解决办法：

方案1：模拟完整的用户输入流程 #

React会监听输入框的input、change事件，但需要事件符合它的合成事件规范，同时得让React的状态和DOM值同步。步骤如下：

• 用inputEl.value设置输入值（别用setAttribute，input的value属性和DOM attribute是分离的，React认的是前者）
• 依次触发focus、input、change事件，用InputEvent模拟输入更贴近真实用户行为

const inputEl = document.querySelector('.Container_search-input');
// 设置输入内容
inputEl.value = 'search text';
// 模拟聚焦（部分页面可能需要这一步触发前置逻辑）
inputEl.dispatchEvent(new Event('focus', { bubbles: true }));
// 模拟输入事件（React通常靠这个实时更新状态）
inputEl.dispatchEvent(new InputEvent('input', {
  bubbles: true,
  cancelable: true,
  data: 'search text'
}));
// 模拟change事件（如果页面靠change触发搜索）
inputEl.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
// 可选：模拟失焦，有些搜索会在失焦时触发
inputEl.dispatchEvent(new Event('blur', { bubbles: true }));

方案2：直接调用React的onChange处理函数 #

要是模拟事件还是无效，可以直接从元素的React事件处理器里拿到onChange方法手动调用：

• 找到元素上以__reactEventHandlers$开头的属性（比如__reactEventHandlers$abc123）
• 取出里面的onChange函数，构造一个符合要求的事件对象传入

const inputEl = document.querySelector('.Container_search-input');
// 找到React的事件处理器属性
const reactHandlerKey = Object.keys(inputEl).find(key => key.startsWith('__reactEventHandlers$'));
if (reactHandlerKey) {
  const onChange = inputEl[reactHandlerKey].onChange;
  if (onChange) {
    inputEl.value = 'search text';
    // 构造React能识别的事件对象
    const mockEvent = {
      target: inputEl,
      currentTarget: inputEl,
      preventDefault: () => {},
      stopPropagation: () => {}
    };
    // 直接调用onChange触发搜索
    onChange(mockEvent);
  }
}

注意事项 #

• 绝对别用setAttribute('value', ...)，这只会修改DOM的静态属性，不会更新input的实际值，React的状态和后者绑定
• 不同版本的React对事件处理略有差异，第一种方案无效的话直接试第二种
• 浏览器扩展里要确保代码在DOM完全加载后执行（比如监听DOMContentLoaded或load事件）

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