前回はタイマー関数を使用しステート値を更新し、画面へ表示される内容を動的にしました。
今回はイベントハンドラを使用してステート値を更新し画面に表示される内容を更新します。
やりたいこと
ラジオボタンを押すと、どのボタンが選択されているかを画面に表示させます。何も選択されていない時は、何も選択されていない旨を表示します。
ラジオボタンの実装
今回は、「攻撃」、「防御」を選択出来るラジオボタンを作成します。ラジオボタンの内容は以下の通りです。
なお、以降はAppコンポーネントへ実装していく事とします。
// ブラウザ表示処理
return (
<>
<div>
<input type="radio" value="attack" onChange={selectVal} checked={val === 'attack'}/>攻撃
</div>
<div>
<input type="radio" value="defend" onChange={selectVal} checked={val === 'defend'}/>防御
</div>
<p>{"今選択しているのは：" + nowSelect(val)}</p>
</>
);後で説明しますが、val はステート値になります。val の値が、”attack” の場合、checkedプロパティがtrueとなるので「攻撃」ラジオボタンがチェックされます。”defend”も同様です。
onChange プロパティはイベントハンドラになります。これも後で説明します。
nowSelect関数を呼び出していますが、nowSelect関数はどのラジオボタンが選択されているかを判定します。これも後で説明します。
イベントハンドラの実装
Reactのラジオボタンでは onChangeプロパティに対して イベントハンドラ を実装します。このイベントハンドラはイベント情報を引数とした関数になります。
今回は onChangeプロパティ へ selectVal関数を渡しています。selectVal関数は、イベント情報(e)を引数とします。
e.target.value からラジオボタンで選択された要素のvalueプロパティの値が取得できます。「攻撃」を選択した場合、”attack”が取得できます。
取得した値をステート値更新関数(setVal)へ渡し、ステート値を更新しています。
この動作は、ラジオボタンが選択される度に起こります。
// ラジオボタンのイベントハンドラ
const selectVal = e => setVal(e.target.value);
// ブラウザ表示処理
return (
<>
<div>
<input type="radio" value="attack" onChange={selectVal} checked={val === 'attack'}/>攻撃
</div>
<div>
<input type="radio" value="defend" onChange={selectVal} checked={val === 'defend'}/>防御
</div>
<p>{"今選択しているのは：" + nowSelect(val)}</p>
</>
);選択されたラジオボタンの表示
nowSelect関数はステート値を受け取り、今どのラジオボタンが選択されているかを判断しています。
// 選択されたラジオボタンの値によって、文字列を返却する。
const nowSelect = val => {
let command = '';
switch (val) {
case 'attack':
command = '攻撃';
break;
case 'defend':
command = '防御';
break;
default:
command = '何も選択されていません。';
}
return command;
};前述でもありましたが、以下は、ステート値を引数としてnowSelect関数を呼び出しています。
<p>{"今選択しているのは：" + nowSelect(val)}</p>ステートの利用
ステートの利用は以下の通りです。
// ステート
const [val, setVal] = React.useState();完成
Appコンポーネントの実装は以下の通りです。
import React from 'react';
function App() {
// ステート
const [val, setVal] = React.useState();
// 選択されたラジオボタンの値によって、文字列を返却する。
const nowSelect = val => {
let command = '';
switch (val) {
case 'attack':
command = '攻撃';
break;
case 'defend':
command = '防御';
break;
default:
command = '何も選択されていません。';
}
return command;
};
// ラジオボタンのイベントハンドラ
const selectVal = e => setVal(e.target.value);
// ブラウザ表示処理
return (
<>
<div>
<input type="radio" value="attack" onChange={selectVal} checked={val === 'attack'}/>攻撃
</div>
<div>
<input type="radio" value="defend" onChange={selectVal} checked={val === 'defend'}/>防御
</div>
<p>{"今選択しているのは：" + nowSelect(val)}</p>
</>
);
}
export default App;最初はステート値が null なので「何も選択されていません。」がブラウザへ表示されます。
ラジオボタンを選択すると、選択した要素のイベントハンドラ(selectVal関数)が実行されます。
イベントハンドラが実行されるとステート値更新関数(setVal)へ、選択されたラジオボタンのvalueプロパティ値が渡されステート値が更新されます。
nowSelect関数はステート値を引数としているのでvalの値が変わると当関数が実行されます。
このように、ステートの値を更新すると、それに関連する処理が実行され結果画面の表示内容も更新されます。
イベントハンドラの書き方
アロー関数の使用
余談ですが、イベントハンドラは以下のようにも書けます。
<input type="radio" value="attack" onChange={e => setVal(e.target.value)} checked={val === 'attack'}/>攻撃最後に
特にありません。