2018/04/24更新

[フロントエンド] 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言語、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に!」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSTwitterをフォローして貰えたら嬉しいです ^ ^

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





こんな記事もいかがですか?

[取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。
[フロントエンド] フロントエンドの入社試験99問!難しいですよ〜w。
[フロントエンド] Webページを表示するテストの際に、通信速度を3Gに制限して表示してみよう
[フロントエンド] スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。
[フロントエンド] Chrome 35 Beta の変更点。Touch制御、新しいJavaScript機能、プレフィックスなしのShadowDOM
[フロントエンド]複数アカウントでのテストには、Chromeのユーザー管理を使って、Cookieを切り替えると便利
[フロントエンド] Chrome36βが出た。変更点など。element.animate、HTML Imports、Object.observe、他。
RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。