React データ属性の取得方法

JavaScript

2022.06.172021.03.10

こんにちは。

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

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

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

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

サンプルコード
実演
追記2022.6.17 関数コンポーネント実装

サンプルコード

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

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 ）を取得しています。

実演

追記2022.6.17 関数コンポーネント実装

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
    const buttonAlert = (e) => {
        alert(e.currentTarget.dataset.num);
    }

    return (
        <div className="App">
            <header className="App-header">
                Learn React App
            </header>
            <body>
                <div>
                    <button data-num="0512" onClick={buttonAlert}>ボタン</button>
                </div>
            </body>
        </div>
    );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

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

マイナビ出版