Question

我正在将JQuery与ReactJS一起使用。单击该按钮时，第一次单击不会执行任何操作。但是，在第二次单击时，我尝试实现的操作确实起作用。但这是其他每一次点击的胜利。

我尝试在$(document).ready()函数内部添加openSubscriptionModalFromButton。这不能解决问题。

我确定要将openSubscriptionModalFromButton传递给我的组件。

我已经研究了.click在Jquery文档上，并且我还阅读了有关在React;）中不使用Jquery的文章。

**在着陆组件中，我要Jquery单击的按钮（请参见id）

<button
 id="right-top-corner-button_upgrade"
>
 UPGRADE/LANDING
</button>

**在工具栏中-弹出一个模版，询问您是否要升级。

 openSubscriptionModalFromButton() {
  $('#right-top-corner-button_upgrade').click() 
  this.closeDialog() // closes the Modal pop-up on after the click
 }

**在工具栏的模态中

<button
 onClick={() => props.openSubscriptionModalFromButton()}
>
 Upgrade/Toolbar
</button>

现在，我只是在控制台上记录“ click”，然后单击2“ click”（第二次单击），它就可以了。

我希望升级/工具栏按钮在每次单击时打开模式，而不是每次打开。

感谢任何帮助。谢谢！

Answer 1

您是否尝试过简单地在按钮上添加事件侦听器以避免任何其他潜在的冲突（jQuery等）？

// After the page is loaded.
window.onload = function () {

  var UpgradeButton = document.getElementById( 'right-top-corner-button_upgrade' );
  UpgradeButton.addEventListener( 'click', function () {
    alert( 'Call my code here.' );
  } );

};

<button id="right-top-corner-button_upgrade">UPGRADE/LANDING</button>

Answer 2

这可能是可行的，但是混合使用jQuery和React往往会遇到一些问题。主要问题是，当React组件重新渲染时（默认情况下发生if any ancestor component's state or props change），属于该组件的任何DOM节点都将被React认为应该的替换-并破坏jQuery的任何更改这些DOM元素制成的。

发生问题的一种可能性是，某种原因导致模态组件的某些祖先发生状态变化，这掩盖了它刚刚由jQuery打开的事实，因为jQuery通过更改模态上的属性来跟踪模态是否已打开。 DOM元素。

所以，我的建议是：单击此按钮时，请确保没有任何祖先因状态更改而重新渲染。这可能需要在您不希望重新呈现的情况下，定义shouldComponentUpdate来返回false。

使用JSFiddle可以更直接地调试它；现在，有我的猜测：）

jQuery .click仅在第二次单击时有效

2 个答案: