ふかしぎのReactさんぷるず

RadioGroupの解説 Componet API - MUI v5 API - Reactさんぷるず

最終更新 2022/04/10
MUI v5の各機能の説明です。
対象のMUIのバージョンは v5.5.2 です。
ここでは初心者向けの基本的な説明をしています。

使用するための下準備

お約束です。取り込まないと使えません。
インポートならば
import { RadioGroup } from '@mui/material';
CDNで使いたいのなら<script>でMUIを読み込んだ後に
const RadioGroup  = MaterialUI.RadioGroup;
で使用できるようになります。
CDNでの詳しいやり方はこちらに移動してください。

RadioGroupの各プロパティの解説

MUIでのRadioGroupの扱い方の説明です。
ラジオボタンをグループ化します。
グループ化することによりどれか一つだけを選べるようになります。
グループ化しない場合はそれぞれ独立した存在なのでどちらもチェックできます。
const RadioGroup = MaterialUI.RadioGroup;
const Radio = MaterialUI.Radio;
ReactDOM.render(
<div>
<div>グループ化する</div>
<RadioGroup>
  <Radio value="ラジオ1" />
  <Radio value="ラジオ2" />
</RadioGroup>
<div>グループ化しない</div>
<Radio value="ラジオ3" />
<Radio value="ラジオ4" />
</div>
, document.getElementById('sample')
);

縦横の表示される方向

デフォルトの設定でCSSのflex-directionがcolumnに設定されます。
そのため何もしないと縦並びになります。
横一列に並べたい場合はRadioGroupでrowを設定します。
そうするとCSSのflex-directionがrowに変更されるため横一列に表示されます。
const RadioGroup = MaterialUI.RadioGroup;
const Radio = MaterialUI.Radio;
ReactDOM.render(
<RadioGroup row>
  <Radio value="ラジオ1" />
  <Radio value="ラジオ2" />
</RadioGroup>
, document.getElementById('sample')
);

children

RadioGroupのchildrenの使い方の説明です。
子要素のノードを設定できます。
const RadioGroup = MaterialUI.RadioGroup;
const Radio = MaterialUI.Radio;
const Koyouso = () => <Radio value="ラジオボタン1"></Radio>;
ReactDOM.render(
<RadioGroup children={<Koyouso />}></RadioGroup>
, document.getElementById('sample')
);

defaultValue

RadioGroupのdefaultValueの使い方の説明です。
管理されない初期値を設定できます。
サンプルはラジオ2を初期値にしているため2番目のラジオボタンにチェックが入った状態になります。
const RadioGroup = MaterialUI.RadioGroup;
const Radio = MaterialUI.Radio;
ReactDOM.render(
<RadioGroup defaultValue="ラジオ2">
<Radio value="ラジオ1" />
<Radio value="ラジオ2" />
</RadioGroup>
, document.getElementById('sample')
);

name

RadioGroupのnameの使い方の説明です。
最終的に生成されるINPUT要素のnameを設定できます。
ここでは<INPUT type="radio">にnameが設定されます。

onChange

RadioGroupのonChangeの使い方の説明です。
INPUT要素のonChangeと同じです。
サンプルではクリックするとアラートウインドを出しチェック状態と値を表示します
eventを通して選択された値をevent.target.valueで取得できます。
const RadioGroup = MaterialUI.RadioGroup;
const Radio = MaterialUI.Radio;
ReactDOM.render(
<div>
<RadioGroup onChange={(event)=>{alert('選択されました。値は'+event.target.value)}}>
  <Radio value="ラジオ1番目" />
  <Radio value="ラジオ2番目" />
</RadioGroup>
</div>
, document.getElementById('sample')
);

value

Radioのvalueの使い方の説明です。
管理されている初期値を設定できます。
管理されているためにユーザー側からは変更できません。
サンプルは2番目にチェックが入っていますがユーザー側からは1番目に変更できません。React内部で変更しない限り2番目固定です。
const RadioGroup = MaterialUI.RadioGroup;
const Radio = MaterialUI.Radio;
ReactDOM.render(
<div>
<RadioGroup value="ラジオ2">
<Radio value="ラジオ1" />
<Radio value="ラジオ2" />
</RadioGroup>
</div>
, document.getElementById('sample')
);
menu

React 目次

最初に現在のReactについて
世界一シンプルなサンプル
React Router v6
React Router v6 API
MUI v5
sxの解説
マテリアルアイコンの解説
Autocomplete
Avatar
AvatarGroup
Badge
Button
ButtonGroup
Checkbox
Chip
Collapse
Divider
Floating Action Button(Fab)
Fade
FormControlLabel
Grow
Icon
List
ListItem
ListItemAvatar
ListItemButton
ListItemIcon
ListItemSecondaryAction
ListItemText
ListSubheader
Radio
RadioGroup
Rating
Select
Slide
Slider
Switch
TextField
ToggleButton
ToggleButtonGroup
Zoom
エラー対処
HTMl select
戻る

全体目次