ボタン押下時処理【React】

■はじめに

Reactで作成したHTMLのボタンを押下した際の処理の方法を記載します。

■手順

以下の記事を参考に、Reactのプロジェクトを作成してください。

reigle.info

App.jsを以下のように書き換えてください。（丸々コピペで大丈夫です）.

import React from 'react';

class App extends React.Component{
  render()
  {
    return (
      <div>
        <h1>Hello World</h1>
        <button onClick={this.btnClick}>ボタン</button>
      </div>
    );
  }

  btnClick() {
    alert("ボタン押下");
  }
}

export default App;

「button」のHTMLの「onClick」でボタン押下時に呼び出される関数を指定しています。