まずはRadioコンポーネントを使う準備をします。

import Radio from "@material-ui/core/Radio";

もし TypeScript 上でならRadioProps型も取り込むと便利かもしれません。

import Radio, {RadioProps} from "@material-ui/core/Radio";

まずは使ってみる

単に<Radio />と置くだけでも以下の画像のように動きます。(分かりやすいようにチェックを入れたものを横に置いてます。)

checked

(event: React.ChangeEvent, checked: boolean) => void;

 {
    console.log(changeEvent, checked /* === true */);
  }}
/>;

<input>valuechangeEventvalue

 {
    console.log(changeEvent.target.value /* === 'foo' */);
  }}
  value="foo"
/>;

<input>name

;

RadioProps<input>

;

data-foo

makeStylesuseStylesclasses

small | mediummedium

'primary' | 'secondary' | 'default''secondary'
'primary''default'

<svg>React.ReactNode<svg>

icon<svg>React.ReactNode

<>
  
    }
  />
  
    }
  />
;

import RadioGroup from '@material-ui/core/RadioGroup';

valuevalue

JavaScript で飯食べたい歴約 5 年、 純( nju33 ) によるノートサイトです。

このサイトではドリンク代や奨学金返済の為、広告などを貼らせて頂いてますがご了承ください。

Change Log