我如何手动分派React合成事件？

Question

我正在将React组件添加到一个有很多遗留代码的现有项目中。

我遇到的一个问题是，React会在document对象上附加其事件委托处理程序。不幸的是，我们许多遗留代码拦截点击事件并在到达document对象之前调用event.stopPropagation（例如，为了处理下拉菜单和模态框，当您在它们之外单击时关闭）。

当点击事件被拦截时，事件不会传播到React的文档级事件处理程序，并且该事件不会被委托给我的React组件（即使组件的实际DOM元素位于DOM中拦截元素的上方，并首先收到实际的非委托事件）。

因此......问题是：是否有一种方法可以在未触发React文档级事件处理程序的情况下手动触发给定事件的React合成事件？或者是否有一种将单个事件处理程序移动或复制到其他地方的方法？

作为备选方案，我考虑在React组件挂载后使用jQuery添加事件，但如果可能的话，我宁愿不这样做。

- Andrew F

Answer 1

根据你的操作，React 中的事件应该在组件内部状态或类似 Flux 架构中的全局状态上生成变化。因此，在此基础上，你可以创建一个包装器来渲染你的组件，并使用所需操作触发该包装器。

例如：

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组件将接收文本属性，在那里您可以进行文本更改。这只是一个快速而简单的示例，展示了您可以做的事情。

- Franco Risso