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