加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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

发布时间:2020-12-15 20:45:10 所属栏目:百科 来源:网络整理
导读:考虑React组件中的以下输入元素: input onChange={() = console.log('onChange')} ... / 在测试React组件时,我正在模拟用户更改输入值: input.value = newValue;TestUtils.Simulate.change(input); 这会导致“onChange”被记录,如预期的那样. 但是,当直接
考虑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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读