时间戳

首页 > 解决方案 > 如何将事件处理程序添加到第三方表单组件中的按钮

reactjs - 如何将事件处理程序添加到第三方表单组件中的按钮

问题描述

我有一个 Gatsby 网站，它使用了一些插件和第三方组件。有问题的组件是使用 react-hubspot-form 构建的表单。Hubspot 发送原始 HTML，我可以使用 CSS 设置样式。我对此有两个潜在的挂断，这两个都涉及针对该表单中的特定元素。

我希望将 Google Analytics 添加到提交按钮以跟踪点击次数。我考虑过包装组件并向父级添加 onClick，但这会跟踪表单上任何位置的点击，而不仅仅是提交按钮。我目前正在尝试合并 ReactGA。

第二个问题是当用户选择单选按钮时更新状态。我需要根据用户选择的单选按钮动态更新 url，并且目前无法弄清楚如何做到这一点。

<HubspotForm
   portalId='PORTAL_ID'
   formId='FORM_ID'
   redirectUrl={`URL_WITH_PROPS_TO_DYNAMICALLY_UPDATE_LENDER_CODE=${props.lenderCode}`}
   submitButtonClass='loanAppSubmitBtn'
   cssClass='program-apply'
   onSubmit={()=>{
             ReactGA.event({
                 category: 'Apply Now Button',
                 action: 'click',
                 label: 'form submission'
             })
     console.log("clicked hidden button")
   }}
/>

当我尝试为 onSubmit 放置一个函数时，控制台说我需要使用 jQuery。

标签： reactjsgoogle-analyticsgatsbyhubspot

解决方案

推荐阅读