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 コンポーネントのイベントの登録方法と、プロパティの変更方法を紹介しました。参考になりましたら幸いです。
React おすすめの学習教材
React MUI を使いこなす上で、React の理解は必須です。ここでは、React 学習のおすすめ教材を紹介します。
React 入門者・Web 開発入門者向け
React や Web 開発の入門者向けおすすめ書籍は、モダンJavaScriptの基本から始める React実践の教科書です。React を下支えしている JavaScript やパッケージマネージャー、モジュールバンドラーなどについて解説があり、React の動作の仕組みを想像しやすくなると思います。
React 経験者者・Web 開発経験者向け
React に少し慣れた方や、Web 開発経験者は、Reactハンズオンラーニングがおすすめです。出版から少し時間が経ち、React 最新バージョンとは記法が変わってしまいっている機能もありますが、React の基本的な機能を網羅しており、脱入門におすすめです。
MUI 参考情報
React MUI を利用する、各種実装例を紹介しています。実行可能サンプルも用意していますので、まず手元で動かして動作を確認したい方にもおすすめです。