javascript - 如何手动调度 React Synthetic Events？

Question

我正在努力将 React 组件添加到包含大量遗留代码的现有项目中。

我遇到的一个问题是 React 将其事件委托(delegate)处理程序附加到 document 对象上。对我来说不幸的是，我们的许多遗留代码在点击事件进入文档对象之前拦截点击事件并调用 event.stopPropagation(例如，处理当您点击它们之外时关闭的实现下拉菜单和模式) .

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

那么...问题:有没有一种方法可以手动触发给定事件的 React 合成事件，而不会触发 React 的文档级事件处理程序？或者有没有办法将单个事件处理程序移动或复制到其他地方？

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

Answer 1

取决于你在做什么， react 中的事件应该对组件的内部状态或类似的东西产生变化(如果你使用的是类似通量的架构，可能会改变全局状态)。因此，考虑到这一点，您可以创建一个包装器来呈现您的组件，并用您想要执行的操作触发该包装器。

例如:

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 组件将接收文本属性，您可以在那里进行文本更改。这只是您可以执行的操作的一个简单粗暴示例。