Reactのeventハンドリングの際に、DOMのカスタム属性にアクセスする

ReactというかJavaScriptのDOM操作の話なのですが、恥ずかしながら小一時間stackしたので、書いておこうと思いました。

Reactのイベントハンドリング

例えばボタンをクリックしたらそのカスタム属性のデータをlogで出す場合を考えてみます。
以下のようにすることで、実装できます。

const ButtonComponent = (props) => {
  const clickButton = (e) => {
    console.log(e.currentTarget.dataset.location);
  }

  return (
      <button id="i-am-id" name="my-name-is-button" data-location="location" onClick={clickButton}>
        <span>Hello</span>
        <span>This is Button.</span>
      </button>
  )
}

まず、event.target と event.currentTarget の違いを意識する

こちらのページで紹介されているデモページを見ればわかるのですが、event.targetの場合ですと「イベントを発生させた要素自体」、event.currnetTargetの場合は「イベントがアタッチされている要素」（上述の例の場合は<button>）が取得できるようです。

DOM要素の普通のプロパティにアクセスする

普通のプロパティとは、idやclass、nameなどのあらかじめ定められている属性のことです。
その場合、

const ButtonComponent = (props) => {

const clickButton = (e) => {
  console.log(e.currentTarget.id);
  // i-am-id
  console.log(e.currentTarget.name);
  // my-name-is-button
  console.log(e.currentTarget.location);
  // undefined
}

  return (
      <button id="i-am-id" name="my-name-is-button" location="location" onClick={clickButton}>
        <span>Hello</span>
        <span>This is Button.</span>
      </button>
  )
}

以上のように、e.currentTargetから直接アクセスできます。しかし、locationのように自分で勝手に作ったカスタムプロパティ(カスタム属性)にはアクセスできません。

DOM要素のカスタムプロパティにアクセスする

カスタムプロパティにアクセスするには、HTMLElement.datasetを使います。

該当プロパティの前にdata-を付けることで、e.currentTarget.dataset.でアクセスできるようになります。
コードは、一番最初に述べたものと同じです。

const ButtonComponent = (props) => {
  const clickButton = (e) => {
    console.log(e.currentTarget.dataset.location);
  }

  return (
      <button id="i-am-id" name="my-name-is-button" data-location="location" onClick={clickButton}>
        <span>Hello</span>
        <span>This is Button.</span>
      </button>
  )
}

参考 : stackOverflow - How to access custom attributes from event object in React?