解决方案...

Question

我有一个简单的React组件：状态= { 值：“， }; render（）{ 返回; } handleChange =（e）=> { this.setState（{ 值：e.target.value， }）; console.log（'处理更改!!'） }; 我希望能够通过普通的javascript或在本示例中为jQuery以编程方式触发事件处理程序。 $ select = $（'选择'）; $ select.val（'1'）; // 然后 $ select.trigger（'change'）; // 要么 $ select.trigger（'input'）; 但是这些都不触发React组件中的onChange处理程序，因此状态不会被更新。我的问题：如何使用DOM和Javascript触发onChange处理程序？ [编辑] 为了进一步说明，我正在像这样安装React组件： el = document.createElement（'div'） ReactDOM.render（MySelect，el） $ select = $（el）.find（'select'）; $ select.val（'1'）; // 然后 $ select.trigger（'change'）; // 要么 $ select.trigger（'input'）;

Answer 1

为后代回答我自己的问题。

事实证明，这个问题是双重的。但首先，要了解一些背景：

反应事件

React事件系统通过委派给根节点来侦听本地DOM事件。也就是说，它不会使用onChange将侦听器附加到每个元素上，而只是侦听根文档中通过DOM冒起的事件。

对于那些熟悉jQuery委托事件的人，这类似于

$(document).on('change', '.my-select', callback)

jQuery事件

第二，jQuery本身在其系统中冒泡了DOM，从而在某种程度上“替代”了DOM本机事件，这是您可以抛出自定义事件的方式。

解决方案...

如上所述，我有2个问题，因此有2个解决方案：

第一

由于jQuery使用其自己的事件系统，因此触发了事件

$(select).trigger('change')

不会到达React的根事件监听器。因此，我们以...为母语。

select.dispatchEvent(new Event('change', {bubbles, true}));

...但这还不够。

第二

DOM事件从元素到文档根目录冒泡。 但是请注意，我从未将元素附加到文档上！ change事件冒泡到……无处可发！同样，它永远不会到达在文档中注册的React事件监听器。

如果我将元素添加到DOM中，则如下所示：

el = document.createElement('div')
ReactDOM.render(MySelect, el)
document.body.appendChild(el) // <-- attach to DOM

现在事件到达React事件侦听器，并且组件中原始的onChange处理程序被触发。

我希望这对遇到类似问题的人有所帮助。

ps。我发现此reactjs文件中的文档有助于理解React事件系统：https://github.com/facebook/react/blob/master/packages/react-dom/src/events/ReactBrowserEventEmitter.js

如何使用纯DOM Javascript以编程方式触发React组件中的<select> onChange？

1 个答案:

解决方案...

第一

第二