javascript - 在嵌入组件中响应 onClick 事件调用序列

Question

var mark = null;
class Demo extends React.Component {
  handleClick(evt) {
    mark = "outer";
  }
  handleSpanClick(evt) {
    mark = "inner";
  }
  render() {
    return (
      <div onClick={this.handleClick.bind(this)}>
        <span onClick={this.handleSpanClick.bind(this)}>
          inner
        </span>
      </div>
    )
  }
}

例如，我期望当我单击span时标记将是“内部”，但实际上，标记将是“外部”。我知道 span 的 onClick 事件将首先被调用，所以我无法获得“内部”。

如何在这个示例中获得“内在”？

Answer 1

Example for Bubbling and Capturing in React.js

Bubbling and capturing are both supported by React in the same way as described by the DOM spec, except for how you go about attaching handlers.

<div onClickCapture={this.handleClick.bind(this)}>
...