将 JavaScript 重写为 React 不接受 jQuery

Question

我正在尝试重新编写我的旧 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？

Answer 1

为什么要使用 jQuery？

您可以使用react setters 在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);
}