LoginSignup
4
4

More than 5 years have passed since last update.

ReactのonClickで、イベントがバインドされた要素自身を捕捉する

Posted at

背景

Rails5.1からwebpackが導入されそうなので、
今のうちからwebpack&Reactで遊んでいる。
(webpacker gemを使っているが、簡単便利過ぎてRails5.1が待ち遠しい。)

本題

ReactでonClickイベントをハンドルする際に
クリックされた要素の取得で少し困って調べたので備忘メモ

<div onClick={this.handleClick}>
  hoge
  <div>
    fuga  #これをクリックする
  </div>
</div>

こんなDOMに対して、クリックされた要素を取るとき、
・クリックされた子要素を取得するにはe.target
・イベントバインドされている要素を取得するにはe.currentTarget
を使う。

handleClick(e) {
  console.log(e.target)  # <div>fuga</div>
  console.log(e.curretTarget) # <div>hoge<div>fuga</div></div>
}

それだけ。

4
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
4