如何在React嵌入的HubSpot表单中添加onSubmit事件监听

我通过如下方式在React组件中嵌入了HubSpot表单，但无法实现从父组件传递自定义提交回调函数的功能，希望能在父组件App.tsx中像示例那样传入handleSubmit。

原HubspotForm.tsx代码 #

import React, { useEffect } from 'react'
import './HubspotForm.scss'

const HubspotForm = () => {
  useEffect(() => {
    const script = document.createElement('script')

    script.src = 'https://js.hsforms.net/forms/v2.js'
    document.body.appendChild(script)

    script.addEventListener('load', () => {
      // @TS-ignore
      if (window.hbspt) {
        // @TS-ignore
        window.hbspt.forms.create({
          portalId: '*****',
          formId: '*****',
          target: '#hubspotForm',
          //onFormSubmit: function ($form) {},
        })
      }
    })
  }, [])

  return (
    <div className="form-container">
      <form id="hubspotForm" />
    </div>
  )
}

export default HubspotForm

理想实现效果（App.tsx） #

const App = () => {
    const [isSuccessShown, setIsSuccessShown] = useState<boolean>(false)
    const handleSubmit = (): void => {setIsSuccessShown(true)}

    return (
        <>
          <HubspotForm
           //onSubmit={handleSubmit} => 需添加此功能
          />
        </>
      );
};

解决方案 #

要实现这个功能，需要修改HubspotForm组件，让它接收父组件传递的onSubmit回调，并将其绑定到HubSpot表单的onFormSubmit钩子上，同时处理组件更新时的表单重新初始化逻辑：

修改后的HubspotForm.tsx #

import React, { useEffect } from 'react'
import './HubspotForm.scss'

// 定义组件props类型
type HubspotFormProps = {
  onSubmit?: () => void
}

const HubspotForm = ({ onSubmit }: HubspotFormProps) => {
  useEffect(() => {
    // 先清理已存在的表单，避免重复创建
    const formContainer = document.getElementById('hubspotForm')
    if (formContainer) {
      formContainer.innerHTML = ''
    }

    // 加载HubSpot表单脚本，避免重复插入
    let script = document.querySelector('script[src="https://js.hsforms.net/forms/v2.js"]') as HTMLScriptElement
    if (!script) {
      script = document.createElement('script')
      script.src = 'https://js.hsforms.net/forms/v2.js'
      document.body.appendChild(script)
    }

    // 脚本加载完成后初始化表单
    const initForm = () => {
      // @TS-ignore
      if (window.hbspt) {
        // @TS-ignore
        window.hbspt.forms.create({
          portalId: '*****',
          formId: '*****',
          target: '#hubspotForm',
          // 将父组件传递的回调绑定到表单提交事件
          onFormSubmit: () => {
            onSubmit?.()
          }
        })
      }
    }

    // 如果脚本已加载完成，直接初始化；否则监听加载事件
    if (script.readyState === 'complete' || script.readyState === 'loaded') {
      initForm()
    } else {
      script.addEventListener('load', initForm)
    }

    // 清理函数：移除事件监听，避免内存泄漏
    return () => {
      script.removeEventListener('load', initForm)
    }
  }, [onSubmit]) // 将onSubmit加入依赖数组，确保回调变化时重新初始化表单

  return (
    <div className="form-container">
      <form id="hubspotForm" />
    </div>
  )
}

export default HubspotForm

修改后的App.tsx #

import React, { useState } from 'react'
import HubspotForm from './HubspotForm'

const App = () => {
    const [isSuccessShown, setIsSuccessShown] = useState<boolean>(false)
    const handleSubmit = (): void => {
        setIsSuccessShown(true)
        // 这里可以添加更多自定义逻辑，比如发送统计事件、调用API等
    }

    return (
        <>
          <HubspotForm onSubmit={handleSubmit} />
          {isSuccessShown && <div>提交成功！</div>}
        </>
      );
};

export default App

关键说明 #

• 给HubspotForm组件添加了onSubmit props，允许父组件传入自定义回调函数
• 加入表单清理逻辑，避免重复渲染多个HubSpot表单实例
• 将onSubmit加入useEffect的依赖数组，确保父组件回调更新时，表单能重新初始化并绑定最新的回调
• 通过HubSpot表单原生的onFormSubmit钩子，触发父组件传递的自定义逻辑

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