[MUI Tips][Checkbox] チェック変更時の処理を実装する

Checkbox

MUI Tips

2022.05.142022.05.25

この記事はこんな人におすすめ
環境
チェック時の処理を実装する
MUI Tips 一覧

この記事はこんな人におすすめ

MUI における Checkbox でチェックが変更されたときの処理を実装したい

公式サイトの情報はコチラ。

環境

React: 17.0.2
MUI: 5.5.2

チェック時の処理を実装する

チェック時の処理を実装するには、以下の書式を使用します。
onChange の後ろにある {} に処理を書きます。

<Checkbox onChange={チェック時の処理をここに記述} />

以下は、Checkbox のチェック状態が変更されたときにで、かつチェックが付いた時にアラートを表示する例です。

<Checkbox /> の onChange には handleChange が結び付けられています。handleChange が実行されると、チェック状態（event.target.checked）を取得して true のときにアラートを表示しています。

import * as React from 'react';
import Checkbox from '@mui/material/Checkbox';
import { FormGroup, FormControlLabel } from '@material-ui/core';

export default function CheckboxSample11() {
    const [checked, setChecked] = React.useState(true);

    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        if (event.target.checked) {
            alert('クリックされました');
        }
    };

    return (
        <div>
            {/* Checkbox に不定状態を設定する例 */}
            <FormGroup row={true}>
                <FormControlLabel 
                    control={<Checkbox onChange={handleChange} />} 
                    label="ラベル" />
            </FormGroup>
        </div>
    );
}