スポンサーリンク

React データ属性の取得方法

JavaScript

こんにちは。

React と日々戦っているタロです。

突然ですが、Reactのデータ属性の取得方法はご存知ですか?

おそらくこの記事をご覧の方の多くは jQueryだと $(this).data(‘id’) のような形で取得できたデータ属性を React で取得する方法を知りたいという方だと思っています。

実際にぼくも困ったのでサンプルコードと実演を交えてまとめておこうと思います。

スポンサーリンク

サンプルコード

データ属性の取得方法がこちら↓

class App extends React.Component {
  constructor(props) {
    super(props);
    
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
    alert(e.currentTarget.dataset.num);
  }

  render () {
    return (
      <div>
        <button data-num="0512" onClick={this.handleClick}>
          ボタン
        </button>
      </div>
    )
  }
}
ReactDOM.render(
  <App/>,
  document.getElementById('root')
);

e.currentTarget.dataset.num と実装することでデータ属性(上の例では num )を取得しています。

実演

React の学習には下の書籍がおすすめです♩

コメント

タイトルとURLをコピーしました