【React】要素のidやclassへのアクセス(参照)方法

  • 2021年10月27日
  • 2023年5月11日
  • React

ReactでHTMLの要素にアクセスする方法を紹介しています。

【React】要素のidやclassへのアクセス方法

ReactでHTMLの要素にアクセスするにはcurrentTargetを使用します。
ReactというよりもJavaScriptの機能です。
Reactではさまざまな関数の記述方法がありますが、今回はアロー型で考えます。
関数は以下の通りです。
const handleClickOpen = (e) =>{
    console.log(e.currentTarget.id);
};
handleClickOpenは要素をクリックしたときに発火する関数です。
この関数は「e」という引数を持ちます。これはeventの略です。
この引数に対してcurrentTargetを使うことでidやクラスが取得できます。
使うことが多いので、覚えておきましょう。
currentTargetとtargetの違いについて
紹介したcurrentTargetと似たやつに、targetがあります。
これらの違いを簡単に説明します。
以下のようなHTMLコードがあるとします。
<button onClick={onClick}>
<strong>Click me</strong>
</button>
このとき、e.targetとe.currentTargetで返ってくる値は以下のように違います。
  • target:<strong>Click me</strong>
  • currentTarget:<button>…</button>

targetとcurrentTargetで返ってくる値が違います。
targetはイベントを発生させた原因、currentTargetはイベントハンドラが付加された要素です。

この場合はtargetはクリックしたもの「strong要素」をcurrentTargetはonclickが指定されているbutton要素を返します。

基本的にはcurrentTargetを使うのが吉かな、と思います。