javascript - 将 JavaScript 重写为 React 不接受 jQuery
问题描述
我正在尝试重写我的旧 JavaScript 代码并使其适用于 React。
这背后的主要思想只是在我的第 3 方表单中包含一些外部数据。
这是我的旧 JS:
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: 'myID',
formId: 'myID',
onFormSubmit: function() {
jQuery('input[name="TICKET.content"]').val(JSON.stringify(window.cart,undefined, 2)).change();
}
});
</script>
并试图让它在 React 中工作:
React.useEffect(() => {
const script = document.createElement('script');
script.src = 'https://js.hsforms.net/forms/v2.js';
document.body.appendChild(script);
script.addEventListener('load', () => {
if (window.hbspt) {
window.hbspt.forms.create({
portalId: 'myID',
formId: 'myID',
onFormSubmit: function() {
jQuery('input[name="TICKET.content"]').val(window.cart).change();
},
target: '#hubspotForm',
});
}
});
});
<div id="hubspotForm"></div>
尝试使用 react-hubspot-form
onSubmit={function (e) {
e.preventDefault();
const ticket = document.querySelector('input[name="TICKET.content"]');
const nativeInputValueSetter = Object.getOwnPropertyDescriptor( window.HTMLInputElement.prototype,'value').set;
nativeInputValueSetter.call(ticket, cart);
const evt = new Event('change', {bubbles: true,});
ticket.dispatchEvent(evt);}}
但是使用上面的代码,我得到了jQuery
未定义的错误。有没有更好的方法来重写或者我能够以某种方式定义 jQuery?
解决方案
为什么要使用 jQuery?
您可以使用 react setter在 react js 中触发 onchange 事件的最佳方法是什么
尝试
onFormSubmit: function(e) {
e.preventDefault(); // I assume you do not want to submit
const ticket = document.querySelector('input[name="TICKET.content"]');
const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
nativeInputValueSetter.call(ticket , window.cart);
const evt = new Event('change', { bubbles: true});
ticket.dispatchEvent(evt);
}
推荐阅读
- java - 如何从 SQS 触发器调用涉及 spring cloud feign 的 lambda 函数
- android - 当我拍照时,某些 Android 设备上的应用程序崩溃
- python - 使用 datefinder 提取日期时间字符串
- python - 如何使用 pandas 跨列替换时间戳
- python - Docker - REST 不提供 python 应用程序
- c++ - 联合中的 Flatbuffers 结构不起作用(C++)
- javascript - 按药丸/按钮过滤,而不是使用选择 - 角度
- sql - 根据第三列值在 bigquery 中选择两个不同的列
- java - java中扫描线多边形填充算法的问题
- java - 如何在没有绑定异常的情况下打印一维数组中的额外元素?