reactjs - 如何强制“hbspt.forms.create 中的 onFormSubmit 函数需要 jQuery。它没有运行。” 盖茨比 SPA 中的错误
问题描述
我正在尝试将 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
解决方案
对我来说是下一个解决方案--->我添加了“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={() => {}}
/>
推荐阅读
- python - 无法在文件 tensorflow/core/kernels/mkl_slice_op 中创建视图原语描述符
- flutter - 引发了另一个异常:FormatException: Invalid number (at character 1)
- batch-file - 对非字母数字字符使用 %~dp0
- rust - 编译 proj-sys crate 时如何设置 C 包含路径?
- ruby-on-rails - 如何将 after_sign_up_path_for 重定向到另一个控制器的创建操作?
- xcode - Where can I find Xcodes own logs?
- c# - 使用 C# .Net Framework 从服务器端检索客户端信息
- javascript - 如何在 oracle apex 中使用数据库存储映像创建值列表
- ballerina - 为什么ballerina不提供base64编解码只提供base64URL编解码
- php - 尝试在一个查询中插入和更新两者但不工作