MUI React

React: MUI Button コンポーネントの使い方（イベント登録とプロパティの変更、サンプルあり）

MUI Button コンポーネントのイベント登録方法と、プロパティの変更方法を紹介します。

事前準備：React MUI インストール記事

本稿の事前準備として、React MUI のインストール方法は、下記ページを参考に行って下さい。

MUI Button コンポーネントのイベント登録方法

React では、HTMLButtonElement と同等のイベントが用意されています。MUI Button コンポーネントにおいても、React のイベントを使うことができ、ここでは button コンポーネントと同等の方法で click イベントを登録します。

<div className="App">
  <header className="App-header">
    <Button variant="outlined"
            onClick={handleClick} /* クリックイベントの登録 */
    >Material-UI ボタン</Button>
  </header>
</div>

続いて、イベントハンドラーを宣言します。

function App() {
  // クリックイベントのイベントハンドラー
  const handleClick = () => {
    alert("button clicked!");
  }
  return (
    <div className="App">
      <header className="App-header">
        <Button variant="outlined"
                onClick={handleClick} /* クリックイベントの登録 */
        >Material-UI ボタン</Button>
      </header>
    </div>
  );
}

ボタンをクリックすると、登録されたイベントハンドラーが呼び出され、alert が実行されていることが分かります。

Button プロパティの変更方法

続いて、MUI Button のプロパティを変更してみましょう。ここでは、color プロパティを "error" に設定し、MUI Button の前景色と背景色を変更します。

<div className="App">
  <header className="App-header">
    <Button variant="outlined"
            color='error'
            onClick={handleClick} /* クリックイベントの登録 */
    >Material-UI ボタン</Button>
  </header>
</div>

上記のプロパティ変更により、MUI Button の外観が変わることが分かります。

サンプルアプリケーション

mui-button-demoダウンロード

まとめ

今回は、MUI Button コンポーネントのイベントの登録方法と、プロパティの変更方法を紹介しました。参考になりましたら幸いです。

React おすすめの学習教材

React MUI を使いこなす上で、React の理解は必須です。ここでは、React 学習のおすすめ教材を紹介します。

React 入門者・Web 開発入門者向け

React や Web 開発の入門者向けおすすめ書籍は、モダンJavaScriptの基本から始める React実践の教科書です。React を下支えしている JavaScript やパッケージマネージャー、モジュールバンドラーなどについて解説があり、React の動作の仕組みを想像しやすくなると思います。

モダンJavaScriptの基本から始める　React実践の教科書 （最新ReactHooks対応） [ じゃけぇ（岡田　拓巳） ]
created by Rinker
¥2,860 (2024/04/27 17:00:39時点 楽天市場調べ-詳細)

React 経験者者・Web 開発経験者向け

React に少し慣れた方や、Web 開発経験者は、Reactハンズオンラーニングがおすすめです。出版から少し時間が経ち、React 最新バージョンとは記法が変わってしまいっている機能もありますが、React の基本的な機能を網羅しており、脱入門におすすめです。

Reactハンズオンラーニング 第2版 Webアプリケーション開発のベストプラクティス [ Alex Banks ]
created by Rinker
¥3,740 (2024/04/27 17:00:39時点 楽天市場調べ-詳細)

MUI 参考情報

React MUI を利用する、各種実装例を紹介しています。実行可能サンプルも用意していますので、まず手元で動かして動作を確認したい方にもおすすめです。

-MUI, React