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

我正在尝试在我的SAP中实现HubspotForm。它是渲染的，但是当我单击submit按钮时，我得到一个错误：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

选中此项：

这是提出的解决办法之一。我将尽量避免的另一个问题是直接在您的项目上导入jQuery。

检查以下内容：

---

这是提出的解决办法之一。我将尽量避免的另一个问题是直接在您的项目上导入jQuery。

For me works next solution-->我添加了onReady属性代码，用于检查jQuery脚本是否在DOM中，如果不在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={() => {}}
/>

---

For me works下一个解决方案-->我添加onReady属性代码，该代码检查jQuery脚本是否在DOM中，如果不在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={() => {}}
/>

---

谢谢你的回答！我已经通过npm安装jQuery安装了jQuery，但表单仍然不起作用。我可能需要在模块内导入它或执行其他操作？请在不使用jQuery的情况下尝试这种方法。当然，在安装它时，您需要导入它，就像任何其他依赖项一样。好的，我在我的组件中实现了它，但我不明白在函数处理程序{…}中应该使用什么。创建一个函数，它将发送表单并在//do stuff中触发它。感谢您回答man！我已经通过npm安装jQuery安装了jQuery，但表单仍然不起作用。我可能需要在模块内导入它或执行其他操作？请在不使用jQuery的情况下尝试这种方法。当然，在安装它时，您需要导入它，就像导入任何其他依赖项一样。好的，我在我的组件中实现了它，但是我不明白在函数处理程序{…}中应该使用什么。创建一个函数，该函数将发送表单并在//do stuff中触发它