如何强制“hbspt.forms.create 中的 onFormSubmit 函数需要 jQuery。它未运行。” Gatsby SPA 中的错误

Question

我正在尝试将 HubspotForm 实施到我的 SAP 中。它呈现，但当我单击提交按钮时，我收到错误“hbspt.forms.create 中的 onFormSubmit 函数需要 jQuery。它没有运行。” 我怎样才能强迫这个？

我的组件：

import React from "react"
import style from "./bottomForm.module.sass"
import BackgroundImage from "gatsby-background-image"
import classNames from "../../helpers/classNames"
import HubspotForm from "react-hubspot-form"
import { graphql, useStaticQuery } from "gatsby"

const BottomForm = ({ image, title, children }) => {
  const defaultImage = useStaticQuery(graphql`
    query {
      form_bg: file(relativePath: { eq: "common/form_bg.jpg" }) {
        childImageSharp {
          fluid(maxWidth: 1920) {
            ...GatsbyImageSharpFluid_noBase64
          }
        }
      }
    }
  `)

  return (
    <BackgroundImage
      Tag="section"
      className={style.section}
      fluid={image || defaultImage.form_bg.childImageSharp.fluid}
      id={"bottomForm"}
    >
      <div className={style.content}>
        <h2 className={style.title}>{title}</h2>
        <div className={style.form_box}>
          <div className={classNames(style.form_column, style.form_info)}>
            {children}
          </div>
          <div className={style.form_column}>
            {/*<div id="contactFormBottom" />*/}
            <div className={style.form_contact_box}>
              <HubspotForm
                portalId="9075801"
                formId="6ee5300e-5ffe-471d-a400-92b06ca18a11"
                onSubmit={() => console.log('Submit!')}
                onReady={(form) => console.log('Form ready!')}
                loading={<div>Loading...</div>}
              />
            </div>
          </div>
        </div>
      </div>
    </BackgroundImage>
  )
}

export default BottomForm

Answer 1

对我来说，下一个解决方案是可行的 ---> 我添加“onReady”属性代码，检查 jQuery 脚本是否在 DOM 中，如果不在，则添加它。我还添加了“onSubmit={() => {}}”。如果没有它，错误会再次下降。

<HubspotForm
  portalId="9075800"
  formId="11ba4132-6072-4c18-9ea7-f21b70191120"
  loading={<div>Loading...</div>}
  onReady={() => {
    const script = document.createElement('script');
    script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js';
    let jqueryScript = document.getElementsByTagName('script');
    let src = Array.from(jqueryScript).filter(item => item.src === script.src)
    if(src.length === 0) {
      document.body.appendChild(script)
    }
  }}
  onSubmit={() => {}}
/>