class Application extends React.Component {

  constructor() {

    super();

    this.state = {

      stopPropagationOnCapture: false,

      stopPropagationOnBubble: false,

      stopPropagationOnClick: false,

      logLines: [],

    };

​

    ["_handleClickCapture", "_handleClickBubble", "_handleClick"].forEach(name => {

      this[name] = this[name].bind(this);

    });

  }

​

  render() {

    return (

      <div>

        <div id="grandparent" onClickCapture={this._handleClickCapture}>

          <div id="parent" onClick={this._handleClickBubble}>

            <button id="elem" onClick={this._handleClick}>Click me!</button>

          </div>

        </div>

        <hr />

        {this.renderOptions()}

        {this.renderLogLines()}

      </div>

    );

  }

​

  _handleClickCapture(e) {

    this._log("Handling click via capture on red div");

    if (this.state.stopPropagationOnCapture) {

      e.stopPropagation();

    }

  }

​

  _handleClickBubble(e) {

    this._log("Handling click via bubble on blue div");

    if (this.state.stopPropagationOnBubble) {

      e.stopPropagation();

    }

  }

​

  _handleClick(e) {

    this._log("Handling click directly on button");

    if (this.state.stopPropagationOnClick) {

      e.stopPropagation();

    }

  }

​

  _log(msg) {

    this.setState(s => ({logLines: s.logLines.concat([msg])}));

  }

​

  renderOptions() {

    return (

      <div>

        <div>

          <label>

            <input type="checkbox" value={this.state.stopPropagationOnCapture}

                   onChange={e => this.setState({"stopPropagationOnCapture": e.target.checked})} />

              Stop Propagation on Capture (red div)

          </label>

        </div>

        <div>

          <label>

            <input type="checkbox" value={this.state.stopPropagationOnBubble}

                   onChange={e => this.setState({"stopPropagationOnBubble": e.target.checked})} />

              Stop Propagation on Bubble (blue div)

          </label>

        </div>

        <div>

          <label>

            <input type="checkbox" value={this.state.stopPropagationOnClick}

                   onChange={e => this.setState({"stopPropagationOnClick": e.target.checked})} />

              Stop Propagation on Click (button)

          </label>

        </div>

        <div>

          <button onClick={() => this.setState({logLines: []})}>Clear Log</button>

        </div>

      </div>

    );

  }

​

  renderLogLines() {

    return <textarea value={this.state.logLines.join("\n")} />;

  }

}

​

ReactDOM.render(<Application />, document.getElementById("app"));