Reactイベントオブジェクトのカスタム属性：詳細解説とサンプルコード

2024-04-02

Reactでイベントオブジェクトからカスタム属性にアクセスする方法

e.target.datasetを使用する

これは、HTML要素にdata-属性を使用してカスタム属性を設定し、イベントオブジェクトのtargetプロパティからアクセスする方法です。

例:

<button data-my-attribute="Hello World">ボタン</button>

const handleClick = (e) => {
  const customAttribute = e.target.dataset.myAttribute;
  console.log(customAttribute); // "Hello World" と出力されます
};

<button onClick={handleClick}>ボタン</button>

e.currentTargetを使用する

これは、イベントが発生した要素ではなく、イベントリスナーが登録された要素からカスタム属性にアクセスする方法です。

<div>
  <button data-my-attribute="Hello World">ボタン</button>
</div>

const handleClick = (e) => {
  const customAttribute = e.currentTarget.dataset.myAttribute;
  console.log(customAttribute); // "Hello World" と出力されます
};

<div onClick={handleClick}>
  <button>ボタン</button>
</div>

イベントオブジェクトの拡張を使用する

これは、独自のイベントオブジェクトを作成し、そこにカスタム属性を追加する方法です。

const MyEvent = new CustomEvent('my-event', {
  detail: {
    customAttribute: 'Hello World'
  }
});

const handleClick = (e) => {
  const customAttribute = e.detail.customAttribute;
  console.log(customAttribute); // "Hello World" と出力されます
};

<button onClick={handleClick}>ボタン</button>

document.dispatchEvent(MyEvent);

useRef Hookを使用する

これは、カスタム属性を保存するためにuseRef Hookを使用する方法です。

const customAttributeRef = useRef('Hello World');

const handleClick = (e) => {
  const customAttribute = customAttributeRef.current;
  console.log(customAttribute); // "Hello World" と出力されます
};

<button onClick={handleClick}>ボタン</button>

その他の注意事項

カスタム属性名は、data-プレフィックスで始まる必要があります。
カスタム属性名は、ハイフン (-) を使用して区切ることができます。
カスタム属性値は、文字列、数値、ブール値、オブジェクトなど、任意のデータ型にすることができます。

Reactでイベントオブジェクトからカスタム属性にアクセスするには、いくつかの方法があります。どの方法を使用するかは、状況によって異なります。

e.target.datasetを使用する

<button data-my-attribute="Hello World">ボタン</button>

const handleClick = (e) => {
  const customAttribute = e.target.dataset.myAttribute;
  console.log(customAttribute); // "Hello World" と出力されます
};

<button onClick={handleClick}>ボタン</button>

e.currentTargetを使用する

<div>
  <button data-my-attribute="Hello World">ボタン</button>
</div>

const handleClick = (e) => {
  const customAttribute = e.currentTarget.dataset.myAttribute;
  console.log(customAttribute); // "Hello World" と出力されます
};

<div onClick={handleClick}>
  <button>ボタン</button>
</div>

イベントオブジェクトの拡張を使用する

const MyEvent = new CustomEvent('my-event', {
  detail: {
    customAttribute: 'Hello World'
  }
});

const handleClick = (e) => {
  const customAttribute = e.detail.customAttribute;
  console.log(customAttribute); // "Hello World" と出力されます
};

<button onClick={handleClick}>ボタン</button>

document.dispatchEvent(MyEvent);

useRef Hookを使用する

const customAttributeRef = useRef('Hello World');

const handleClick = (e) => {
  const customAttribute = customAttributeRef.current;
  console.log(customAttribute); // "Hello World" と出力されます
};

<button onClick={handleClick}>ボタン</button>

実行方法

イベントオブジェクトからカスタム属性にアクセスする他の方法

getAttribute メソッドを使用する

これは、HTML要素の getAttribute メソッドを使用してカスタム属性にアクセスする方法です。

<button data-my-attribute="Hello World">ボタン</button>

const handleClick = (e) => {
  const customAttribute = e.target.getAttribute('data-my-attribute');
  console.log(customAttribute); // "Hello World" と出力されます
};

<button onClick={handleClick}>ボタン</button>

dataset プロパティを使用する

<button data-my-attribute="Hello World">ボタン</button>

const handleClick = (e) => {
  const customAttribute = e.target.dataset.myAttribute;
  console.log(customAttribute); // "Hello World" と出力されます
};

<button onClick={handleClick}>ボタン</button>

Lodash ライブラリを使用する

<button data-my-attribute="Hello World">ボタン</button>

import _ from 'lodash';

const handleClick = (e) => {
  const customAttribute = _.get(e.target, 'dataset.myAttribute');
  console.log(customAttribute); // "Hello World" と出力されます
};

<button onClick={handleClick}>ボタン</button>