React useStateでチェックボックスの値を取得する
Reactでチェックボックスの選択状態を扱うには、useStateへboolean型の値を保存します。
チェックボックスでは、event.target.valueではなくevent.target.checkedを使う点がテキスト入力との違いです。単独のオン・オフはboolean、複数候補からの選択は配列とし、画面で扱う状態に合わせて型を選びます。
選択状態を保存する
AgreementCheckbox.tsximport { useState } from 'react';
export const AgreementCheckbox = () => {
const [agreed, setAgreed] = useState(false);
return (
<div>
<label>
<input
type="checkbox"
checked={agreed}
onChange={(event) => setAgreed(event.target.checked)}
/>
利用規約に同意する
</label>
<p>{agreed ? '同意済み' : '同意していません'}</p>
</div>
);
};チェックボックスではvalueではなくcheckedを使用します。変更後の状態はevent.target.checkedから取得できます。
選択されるまでボタンを無効にする
<button type="button" disabled={!agreed}>
次へ
</button>agreedがfalseの場合、!agreedはtrueになるためボタンが無効になります。
複数のチェックボックスを扱う
複数の選択肢は、選択した値の配列として保持できます。
CategoryCheckboxes.tsximport { useState } from 'react';
const categories = ['本', '食品', '日用品'];
export const CategoryCheckboxes = () => {
const [selected, setSelected] = useState<string[]>([]);
const handleChange = (category: string, checked: boolean) => {
setSelected((current) => checked
? [...current, category]
: current.filter((item) => item !== category)
);
};
return (
<fieldset>
<legend>カテゴリ</legend>
{categories.map((category) => (
<label key={category}>
<input
type="checkbox"
checked={selected.includes(category)}
onChange={(event) => handleChange(category, event.target.checked)}
/>
{category}
</label>
))}
<p>選択中: {selected.join('、') || 'なし'}</p>
</fieldset>
);
};選択された場合は配列へ追加し、外された場合はfilterで取り除きます。
上記はチェック状態が変化したときだけ呼ばれる前提です。別の処理からも追加する場合は、includesで存在を確認します。
単独のチェックボックスはboolean、複数の選択肢は配列で管理すると分かりやすくなります。