ボタン押下時処理【React】

■はじめに

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

■手順

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

https://www.reigle.info/entry/2021/05/22/132803

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

import React from 'react';

class App extends React.Component{
  render()
  {
    return (

# Hello World

        <button onClick={this.btnClick}>ボタン</button>

    );
  }

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

export default App;

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