[フロントエンド] React.jsで、onClickイベントを親要素に伝播させない方法

こんにちは、@yoheiMuneです。
React.jsでイベントバブリングを抑止する方法を、ブログに書きたいと思います。

目次

何が問題か

イベントバブリングを抑止しないと、クリックされた要素の親の要素のClickイベントまで発火してしまいます。
例えば、ul -> liの親子関係のあるDOMがあるとします。

class Greeting extends React.Component {

  onClickUl(e) {
    console.log('<ul> was clicked.')
  }

  onClickLi(e) {
    console.log('<li> was clicked.')
  }
  
  render() {
    return (
      <ul onClick={this.onClickUl}>
        <li onClick={this.onClickLi}>Good morning.</li>
        <li onClick={this.onClickLi}>Hello.</li>
        <li onClick={this.onClickLi}>Good night.</li>
      </ul>
    )
  }
}

この時li要素をクリックすると、コンソールに以下の内容が出力されます。

<li> was clicked.
<ul> was clicked.

liをクリックしたのに、その親のulのClickイベントまで発火していることがわかります。

React.jsでイベントバブリングを抑止する方法

jQueryなどのイベント処理ではreturn faluseとすることでイベントバブリングを抑止する（=親要素のclickイベントは発火させない）ことができました。Reactではe.stopPropagation()を利用します。

class Greeting extends React.Component {

  onClickUl(e) {
      console.log('<ul> was clicked.')
  }

  onClickLi(e) {
      e.stopPropagation()  // ** コード追加 **
      console.log('<li> was clicked.')
  }
  
  render() {
    return (
        <ul onClick={this.onClickUl}>
        <li onClick={this.onClickLi}>Good morning.</li>
        <li onClick={this.onClickLi}>Hello.</li>
        <li onClick={this.onClickLi}>Good night.</li>
        </ul>
    );
  }
}

これでliのClickイベントだけ発火し、親要素（ul）のClickイベントは発火しなくなりました。

デモ環境

今回の内容をFiddleで動かすことができます。ご参照ください。

最後に

こういうちょっとした知識の積み上げが、高速コーディングにつながるのかなと思う今日この頃。今後もReactについてもたくさん記事を書きたいと思います。

最後になりますが本ブログでは、フロントエンド、サーバー、Swift、PHP、Node.js、Python、Java、Linux、インフラ、Go言語、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に！」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSやTwitterをフォローして貰えたら嬉しいです ^ ^

最後までご覧頂きましてありがとうございました！