React中如何监听外部脚本加载的按钮点击事件？

一、直接给按钮绑定React点击事件 #

这是最直接的实现方式，你可以在组件内的按钮上添加onClick事件，自定义用户点击后的逻辑，同时不会干扰外部脚本的原有功能：

<button 
  className="wtrvl-checkout_button" 
  id="wetravel_button_widget" 
  data-env="https://awebsite.com" 
  data-version="v0.3" 
  data-uid="62302" 
  data-uuid="54806750" 
  href="https://website.com/checkout_embed?uuid=54806750" 
  style={{backgroundColor:'black', color:'#ffffff', border: '0px', borderRadius: '5px', fontFamily: 'Poppins', cursor: 'pointer'}}
  onClick={() => {
    // 这里写你的自定义逻辑，比如埋点统计、页面状态更新
    console.log('用户触发了结账操作');
  }}
></button>

注意：React中需要用className替代原生HTML的class属性，你原来的代码里写的class要改成className避免报错。

二、监听第三方脚本的自定义事件（更推荐） #

多数第三方结账工具会在关键操作节点触发自定义DOM事件，比如结账弹窗打开、支付成功/取消等。你可以在React组件中通过useEffect监听这些事件，获取更完整的结账流程状态：

import { useEffect } from 'react';

function CheckoutButton() {
  useEffect(() => {
    // 监听结账弹窗打开事件（具体事件名需参考WeTravel官方文档）
    const handleCheckoutOpen = (e) => {
      console.log('结账弹窗已打开', e.detail);
      // 这里可执行后续操作，比如记录用户行为
    };

    window.addEventListener('wetravel-checkout-opened', handleCheckoutOpen);

    // 监听支付完成事件（示例，具体以官方文档为准）
    const handleCheckoutComplete = (e) => {
      console.log('支付流程完成', e.detail);
    };

    window.addEventListener('wetravel-checkout-completed', handleCheckoutComplete);

    // 组件卸载时移除监听，避免内存泄漏
    return () => {
      window.removeEventListener('wetravel-checkout-opened', handleCheckoutOpen);
      window.removeEventListener('wetravel-checkout-completed', handleCheckoutComplete);
    };
  }, []);

  return (
    <button 
      className="wtrvl-checkout_button" 
      id="wetravel_button_widget" 
      data-env="https://awebsite.com" 
      data-version="v0.3" 
      data-uid="62302" 
      data-uuid="54806750" 
      href="https://website.com/checkout_embed?uuid=54806750" 
      style={{backgroundColor:'black', color:'#ffffff', border: '0px', borderRadius: '5px', fontFamily: 'Poppins', cursor: 'pointer'}}
    ></button>
  );
}

export default CheckoutButton;

提示：具体的事件名称需要查阅WeTravel官方嵌入文档，官方通常会明确说明支持的自定义事件类型。

三、监听按钮原生点击事件（兼容特殊场景） #

如果React的onClick因外部脚本阻止事件冒泡而不生效，可以通过useRef获取按钮DOM元素，添加原生点击事件监听：

import { useEffect, useRef } from 'react';

function CheckoutButton() {
  const buttonRef = useRef(null);

  useEffect(() => {
    const button = buttonRef.current;
    if (!button) return;

    const handleClick = () => {
      console.log('用户点击了结账按钮（原生事件监听）');
    };

    button.addEventListener('click', handleClick);

    return () => {
      button.removeEventListener('click', handleClick);
    };
  }, []);

  return (
    <button 
      ref={buttonRef}
      className="wtrvl-checkout_button" 
      id="wetravel_button_widget" 
      data-env="https://awebsite.com" 
      data-version="v0.3" 
      data-uid="62302" 
      data-uuid="54806750" 
      href="https://website.com/checkout_embed?uuid=54806750" 
      style={{backgroundColor:'black', color:'#ffffff', border: '0px', borderRadius: '5px', fontFamily: 'Poppins', cursor: 'pointer'}}
    ></button>
  );
}

export default CheckoutButton;

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