如何手动分派React合成事件？
如何手动分派React合成事件？
提问于 2015-10-23 13:44:28
我正在致力于将React组件添加到包含大量遗留代码的现有项目中。
我遇到的一个问题是React在document对象上附加了用于事件委托的处理程序。对我来说不幸的是，我们的许多遗留代码在它们到达document对象之前就截获了click事件并调用event.stopPropagation (例如，处理实现下拉菜单和当您在其外部单击时关闭的通道)。
当click事件被截获时，该事件不会传播到React的文档级事件处理程序，并且该事件也不会委托给我的React组件(即使组件的实际DOM元素位于DOM中的截取元素之上，并首先接收实际的非委托事件)。
所以..。问:有没有办法在不触及React的文档级事件处理程序的情况下手动触发给定事件的React合成事件？或者有没有办法将单个事件处理程序移动或复制到其他地方？
作为后备，我正在考虑只使用jQuery在React组件挂载后添加事件，但如果可能的话，我宁愿不这么做。
回答 1
Stack Overflow用户
发布于 2016-09-14 00:46:36
根据你在做什么，react中的事件应该在组件的内部状态或类似的东西上产生变化(如果你使用的是flux-like架构，可能是全局状态的变化)。因此，考虑到这一点，您可以创建一个包装器来呈现您的组件，并用您想要做的事情触发该包装器。
例如：
function renderComponent(props={}) {
ReactDOM.render(<Component {...props} />, document.getElementById('elementId'));
}假设您有一个按钮，该按钮在单击后应在react组件的文本上创建更改。
$('button#my-button').on('click', function(event){
event.preventDefault();
renderComponent({text: 'Hello world!'});
});因此，您的react组件将接收text属性，您可以在那里进行文本更改。这只是一个简单的例子，说明你能做些什么。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33295600
复制相关文章
相似问题
腾讯云开发者
