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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

在测试React组件时，我正在模拟用户更改输入值：

input.value = newValue;
TestUtils.Simulate.change(input);

'onChange'如预期的那样，这导致被记录。

但是，当'change'事件直接分派时（我正在使用jsdom）：

input.value = newValue;
input.dispatchEvent(new Event('change'));

该onChange处理器不叫。

为什么？

我使用dispatchEvent而不是的动机TestUtils.Simulate是因为TestUtils.Simulate它不支持事件冒泡，而我组件的行为依赖于此。我想知道是否有没有方法可以测试事件TestUtils.Simulate？

回答：

React使用其自己的事件系统SyntheticEvents（以防止浏览器不兼容，并为React 提供更多事件控制）。

TestUtils正确使用会创建这样的事件，它将触发您的onChange侦听器。

dispatchEvent另一方面，该函数将创建一个“本地”浏览器事件。但是您拥有的事件处理程序是由react管理的，因此只有react（badumts）可以对react进行响应SyntheticEvents。

您可以在此处阅读反应事件：https :

//facebook.github.io/react/docs/events.html

以上是 为什么未在dispatchEvent上调用React事件处理程序？ 的全部内容， 来源链接： utcz.com/qa/404330.html

回到顶部