reactjs – 为什么不在dispatchEvent上调用React事件处理程序?

前端之家收集整理的这篇文章主要介绍了reactjs – 为什么不在dispatchEvent上调用React事件处理程序?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
考虑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(防止浏览器不兼容,并对事件做出更多控制).

使用TestUtils正确创建了一个触发你的onChange监听器的事件.

另一方面,dispatchEvent函数将创建“本机”浏览器事件.但是你拥有的事件处理程序是通过反应来管理的,因此只会对(badumts)做出反应来对SyntheticEvents做出反应.

你可以在这里阅读反应事件:https://facebook.github.io/react/docs/events.html

原文链接:https://www.f2er.com/react/300867.html

猜你在找的React相关文章