なぜ必要になったか？

Material-UIのラジオボタンは、onChangeで変更イベントを扱うことが出来ますが、選択状態を解除することが出来ません。
ここでは、RadioのonClickを使って選択状態を解除する方法を紹介します。

選択状態のラジオボタンを解除する方法

サンプルコードで確認してみます。 Radio単体は、onClickを使用してチェックを外すことができます。

import { useState } from "react";
import { Radio } from "@mui/material";

export const RadioComponent = () => {
    const [checked, setChecked] = useState(false);

    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
        setChecked(!checked);
    }

    return (
        <Radio checked={checked} onClick={handleClick}/>
    );
};

型エラーが発生する場合

onClickを使用して、eventから直接event.target.valueで取得すると、Property 'value' does not exist on type 'EventTarget'.ts(2339)と型エラーとなります。

この場合、event.target as HTMLButtonElementとすることで、型エラーは解決できます。

import { useState } from "react";
import { Radio } from "@mui/material";

export const RadioComponent = () => {
    const [checked, setChecked] = useState(false);
    const [selected, setSelected] = useState('');

    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
        const target = event.target as HTMLButtonElement;
        const value = target.value;

        setChecked(!checked);
        setSelected(value);
    }

    return (
        <Radio checked={checked} value={1} onClick={handleClick}/>
    );
};