React中如何选中DOM内的注入元素并手动触发对应事件？

完全可以在React中选中DOM元素并触发指定事件，React仅封装了组件渲染相关的逻辑，没有限制浏览器原生DOM API的使用，你的场景属于外部注入DOM不受React虚拟DOM管控，直接用原生API实现即可，以下是具体实现方案：

方案1：原生DOM选择+事件触发（适配你的场景） #

和jQuery的实现逻辑一致，仅替换为原生JS API即可：

• 选中DOM元素：使用document.querySelector、document.querySelectorAll方法，支持和jQuery完全相同的CSS选择器语法
• 手动触发事件：通过构造对应事件实例，调用dispatchEvent方法触发，示例代码如下：

// 选中聊天机器人的目标控件，替换为你实际的选择器
const targetControl = document.querySelector('.chatbot-target-control')
if (targetControl) {
  // 构造点击事件，可替换为你需要的任意事件类型（如input、change、focus等）
  const triggerEvent = new MouseEvent('click', {
    bubbles: true, // 保持和原生事件一致的冒泡特性
    cancelable: true
  })
  // 触发事件
  targetControl.dispatchEvent(triggerEvent)
}

如果需要监听该控件的点击事件执行自定义逻辑，示例如下（React组件中使用）：

import { useEffect } from 'react'

function YourPageComponent() {
  useEffect(() => {
    const targetControl = document.querySelector('.chatbot-target-control')
    // 自定义触发逻辑
    const handleControlClick = () => {
      console.log('聊天机器人控件被点击，执行指定逻辑')
    }

    if (targetControl) {
      targetControl.addEventListener('click', handleControlClick)
    }

    // 组件卸载时移除监听，避免内存泄漏
    return () => {
      targetControl?.removeEventListener('click', handleControlClick)
    }
  }, [])

  return <div>你的页面内容</div>
}

特殊情况处理 #

如果聊天机器人的DOM是动态注入的，页面初始化时不存在，可以通过MutationObserver监听DOM变化，等目标元素加载完成后再执行操作，示例如下：

useEffect(() => {
  const observer = new MutationObserver((mutations) => {
    const targetControl = document.querySelector('.chatbot-target-control')
    if (targetControl) {
      // 找到元素后执行你的逻辑，绑定监听/触发事件均可
      targetControl.addEventListener('click', () => console.log('点击触发'))
      // 找到元素后停止监听
      observer.disconnect()
    }
  })

  // 监听整个document的DOM变化，也可以缩小监听范围提升性能
  observer.observe(document.body, {
    childList: true,
    subtree: true
  })

  return () => observer.disconnect()
}, [])

方案2：React自有元素操作（仅作参考，你的场景无需使用） #

如果是React自身渲染的DOM元素，更推荐使用useRef绑定元素再操作，避免和虚拟DOM渲染逻辑冲突：

import { useRef } from 'react'

function YourComponent() {
  const btnRef = useRef(null)

  const triggerBtnClick = () => {
    // 直接调用元素原生方法触发点击
    btnRef.current?.click()
  }

  return (
    <div>
      <button ref={btnRef}>目标按钮</button>
      <button onClick={triggerBtnClick}>手动触发上方按钮点击</button>
    </div>
  )
}

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