React と TypeScript で<input type=radio>を実装してみる

1 min read読了の目安(約1600字

はじめに

React, React Hooks, TypeScript<input type=radio>を実装するのが個人的に難しかったので、記録として残しておきます!

<input type="radio"> とは ?

複数の選択肢のなかで、ユーザーに一つだけ選べるためのタグらしいですね。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/radio

早速、実装をしてみる

nameIDL属性checkedvalue 、そして 変更や状態を持つために, stateonChange を型定義します。

interface TagRadioProps {
    name: string;
    value: Array<string>;
    state: React.SetStateAction<string>;
    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}

グループ内の <input type="radio"> を選択すると、同じグループの現在選択されているラジオボタンが自動的に選択解除されます(一つしか選択されない性質を持つため)
選択された <input type="radio"> と state を一致した時に, checked が付与されるようになります(そうでないと、全てに checked が付与されますからね)

const TagRadioContainer: React.FC<TagRadioProps> = (props) => {
    const { name, value, state, onChange } = props;
    return (
        <>
            {value.map((item, index) => (
                <label key={index}>
                    <input type="radio" name={name} value={item} checked={item === state} onChange={onChange} />
                    {item}
                </label>
            ))}
        </>
    );
};

Form のなかに追加します。 ちなみにですが、<button>タグで submit される理由は button の type 属性の初期値が type="submit" だからなんですね。

<form onSubmit={handleSubmit}>
    <p>
        <TimerRadioContainer name={name} state={state} value={value} onChange={onChange} />
    </p>
    <button >Submit</button>
</form>

おわりに

はじめて、React と TypeScript で実装したものになります。まだまだ慣れていませんが、どんどんエラーとぶつかって上達していきたいですね.
参考になれば幸いです.またこれよりも良さげな実装方法があれば、ご指摘よろしくお願いします。