javascript - React js中防止事件冒泡 'ineffective'

Question

我一直在探索 React 事件系统中的一些事件处理，并了解它如何与 DOM 中的“外部”世界一起工作。

---

例子

这是我一直在试验的带注释的示例:

class FunWithEvents extends Component {
  handleKeyUpWithoutReact(e) {
    console.warn('OMG I handled an event without React 😱');
    // I noticed that `e.cancelBubble` is `true` here...
  }

  handleKeyUpParent(e) {
    // This handler appears to be under React's supervision...
    console.info('I get prevented :)');
  }

  handleKeyUpTarget(e) {
    console.info("I'm shown in the console :)");
    e.stopPropagation();
  }

  componentDidMount() {
    document.addEventListener('keyup', this.handleKeyUpWithoutReact);
  }

  componentWillUnmount() {
    document.removeEventListener('keyup', this.handleKeyUpWithoutReact);
  }

  render() {
    return (
      <div onKeyUp={(e) => this.handleKeyUpParent(e)}>
        <input onKeyUp={(e) => this.handleKeyUpTarget(e)} />
      </div>
    );
  }
}

正如所支持的注释所暗示的那样，我注意到:

1. 事件冒泡之旅的开始/目标，从 input 开始，确实如我所料触发了 handleKeyUpTarget 处理程序。
2. 我们使用 handleKeyUpTarget 中的 e.stopPropagation 防止进一步冒泡。
3. 作为第 2 点的结果，即气泡预防，handleKeyUpParent 处理程序确实不运行，正如我预期的那样。
4. 但是，handleKeyUpWithoutReact 会 被调用。这让我措手不及，无论是对还是(可能)错。

---

我的问题

• 为什么 React 不阻止使用 e.stopPropagation() 冒泡的原生事件？这是为了与共享环境的互操作性而设计的吗？
• 如果这一切都是设计使然，我能否依赖 cancelBubble 设置为 true，如 handleKeyUpWithoutReact 方法中所示？

提前致谢!

---

环境

• react 16.3.1
• react -dom 16.3.1
• Chrome 65.0.3325.181

Answer 1

event.stopPropagation()只停止传播到也附加在 React 中的事件。例如 onKeyUp 上的事件, onChange , onClick等都是 React 中的综合事件，为了停止使用 document.addEventListener 附加的外部事件的传播，您需要使用 nativeEvent 并运行 e.nativeEvent.stopImmediatePropagation();

class FunWithEvents extends React.Component {
  handleKeyUpWithoutReact(e) {
    console.warn("OMG I handled an event without React 😱");
    // I noticed that `e.cancelBubble` is `true` here...
  }

  handleKeyUpParent(e) {
    // This handler appears to be under React's supervision...
    console.info("I get prevented :)");
  }

  handleKeyUpTarget(e) {
    console.info("I'm shown in the console :)");
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
  }

  componentDidMount() {
    document.addEventListener("keyup", this.handleKeyUpWithoutReact);
  }

  componentWillUnmount() {
    document.removeEventListener("keyup", this.handleKeyUpWithoutReact);
  }

  render() {
    return (
      <div onKeyUp={e => this.handleKeyUpParent(e)}>
        <input onKeyUp={e => this.handleKeyUpTarget(e)} />
      </div>
    );
  }
}

Working DEMO