Reactjs 为什么不在dispatchEvent上调用React事件处理程序？

考虑React组件中的以下输入元素：

<input onChange={() => console.log('onChange')} ... />

这会按预期记录

'onChange'

但是，当直接调度

'change'

事件时（我使用的是jsdom）：

未调用

onChange

处理程序

为什么?

---

我之所以使用

dispatchEvent

而不是

TestUtils.Simulate

是因为

TestUtils.Simulate

不支持事件冒泡，我的组件的行为依赖于此。我想知道是否有一种方法可以在不使用

TestUtils的情况下测试事件。Simulate

？

React将自己的事件系统与

SyntheticEvents

一起使用（防止浏览器不兼容，并为React提供更多的事件控制）

使用

TestUtils

正确地创建这样一个事件，它将触发您的

onChange

侦听器

另一方面，

dispatchEvent

功能将创建一个“本机”浏览器事件。但是您拥有的事件处理程序是由react管理的，因此只对react

SyntheticEvents

进行反应（badumts）

---

您可以在此处阅读react事件：

一种不使用react-TestUtils的方法。Simulate：

var script=document.createElement（'script'）；
script.type='text/javascript'；
script.src=https://unpkg.com/react-trigger-change/dist/react-trigger-change.js';
document.head.appendChild（脚本）；
input.value=值；
反应触发更改（输入）；

看看樱桃树，挑选需要的东西。示例代码段：

if (nodeName === 'select' ||
    (nodeName === 'input' && type === 'file')) {
    // IE9-IE11, non-IE
    // Dispatch change.
    event = document.createEvent('HTMLEvents');
    event.initEvent('change', true, false);
    node.dispatchEvent(event);
  }

---

我为输入元素创建了一个小版本的

没有外部依赖项，复制粘贴和它将工作

适用于React 16.9，通过Safari（14）、Chrome（87）和Firefox（72）进行检查

---

你是我的救世主！这里没有足够的信息。什么是

值

？如果我想单击一个按钮，该按钮是否应添加到

const-input

或

const-input.value

？因此，我尝试将其设置为

constinput

，并得到

reactTriggerChange是未定义的

，因此我添加了一个Import语句。然后Get

无法读取未定义的属性“toLowerCase”

。另外，我有大量的linting错误，我必须清理这些错误才能使用这个包：（@vapcguy添加了更多）description@rofrol谢谢-我把最后3行拉出来，在我为按钮创建的事件处理程序中使用它们来单击另一个按钮。我分配

节点
：
const node=document.getElementsByClassName（“关闭”）
我的目标按钮有
class=“close”
&它是页面上唯一一个包含该类的元素。当我单击第一个包含这些代码行的按钮时，会给出
未捕获的类型错误：无法读取未定义的属性“\uu reactInternalInstance$iedoafjkjst1cmk11d5tgldi”
-与
TestUtils.Simulate.click类似的错误（node）；
@rofrol我想我的问题在于如何获得
节点
。当我分配一个ID并使用
const node=document.getElementById（“myID”）
，我得到了
TestUtils.Simulate.click（node）
最终起作用。我再次尝试使用上面使用
initEvent
和
dispatchEvent
的代码，它停止给我错误，但也不起作用-什么都没有发生。React版本15.3.1。我不知道。
input.value = newValue;
input.dispatchEvent(new Event('change'));

if (nodeName === 'select' ||
    (nodeName === 'input' && type === 'file')) {
    // IE9-IE11, non-IE
    // Dispatch change.
    event = document.createEvent('HTMLEvents');
    event.initEvent('change', true, false);
    node.dispatchEvent(event);
  }

const triggerInputChange = (node: HTMLInputElement, inputValue: string) => {
      const descriptor = Object.getOwnPropertyDescriptor(node, 'value');

      node.value = `${inputValue}#`;
      if (descriptor && descriptor.configurable) {
        delete node.value;
      }
      node.value = inputValue;

      const e = document.createEvent('HTMLEvents');
      e.initEvent('change', true, false);
      node.dispatchEvent(e);

      if (descriptor) {
        Object.defineProperty(node, 'value', descriptor);
      }
};