ふかしぎのReactさんぷるず

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

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

使用するための下準備

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

Switchの各プロパティの解説

MUIでのSwitchの扱い方の説明です。
オンオフを切り替えるスイッチです。
const Switch = MaterialUI.Switch;
ReactDOM.render(
<Switch />
, document.getElementById('sample')
);

checked

Switchのcheckedの使い方の説明です。
●を右に移動させスイッチが入った状態にするかの設定です。
ブール値を設定します。trueにするとスイッチが入った状態になります。
※注意してください。ブール値を渡さなければいけないためchecked="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。checkedと書くだけでchecked={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
これはReactで管理されている値です。そのためユーザー側で変更しようとしてもできません。
Reactで管理されていない値はdefaultCheckedを使います。
const Switch = MaterialUI.Switch;
ReactDOM.render(
<Switch checked={true} />
, document.getElementById('sample')
);

checkedIcon

SwitchのcheckedIconの使い方の説明です。
オンにした際に表示するアイコンを設定します。
ノードを設定します。
サンプルの1つ目はオンにしたら●の代わりに「オン」という文字を表示します。
2つ目はオンにしたら●の代わりに作ったアイコンを表示します。
オンの状態のアイコンはiconで設定します。
const Switch = MaterialUI.Switch;
const TukuttaDiv = <div>オン</div>;
const createSvgIcon = MaterialUI.createSvgIcon;
const TukuttaIcon = createSvgIcon(<path d="M2 9h20v6h-20M9 2v20h6v-20z" />,'TukuttaIcon');
ReactDOM.render(
<div>
<Switch checkedIcon={TukuttaDiv} />
<Switch checkedIcon={<TukuttaIcon />} />
</div>
, document.getElementById('sample')
);

classes

Switchのclassesの使い方の説明です。
CSSの設定を上書きします。

color

Switchのcolorの使い方の説明です。
色の設定はcolorで行います。
使えるのはprimary、secondary、success、error、info、warning、それと自分で作った色です。
自分で色を作る場合は変数で定義しThemeProviderで適用します。
未設定のデフォルトはprimaryになります。
各スイッチをオンにすると色が変わっていることが分かります。
const Switch = MaterialUI.Switch;
const ThemeProvider = MaterialUI.ThemeProvider;
const createTheme   = MaterialUI.createTheme;
const tukuttaTheme = createTheme({
  palette: {
    tukuttaIro: {
      main: '#ff00ff',
    },
  },
});
ReactDOM.render(
<ThemeProvider theme={tukuttaTheme}>
<Switch color="primarydefaultValue="primary色" />
<Switch color="secondarydefaultValue="secondary色" />
<Switch color="successdefaultValue="success色" />
<Switch color="errordefaultValue="error色" />
<Switch color="infodefaultValue="info色" />
<Switch color="warningdefaultValue="warning色" />
<Switch color="tukuttaIro" defaultValue="自分で作った色" />
</ThemeProvider>
, document.getElementById('sample')
);

defaultChecked

SwitchのdefaultCheckedの使い方の説明です。
●を右に移動させスイッチが入った状態にするかの設定です。
ブール値を設定します。trueにするとスイッチが入った状態になります。
※注意してください。ブール値を渡さなければいけないためdefaultChecked="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。defaultCheckedと書くだけでdefaultChecked={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
この値はReactで管理されていないのでユーザー側で自由に変更できます。
Reactで管理する場合はcheckedを使います。
const Switch = MaterialUI.Switch;
ReactDOM.render(
<Switch defaultChecked={true} />
, document.getElementById('sample')
);

disabled

Switchのdisabledの使い方の説明です。
使用不可にするかの設定です。
使用不可になると薄い灰色になります。
ブール値を設定します。trueにすると使用不可になります。
※注意してください。ブール値を渡さなければいけないためdisabled="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。disabledと書くだけでdisabled={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
const Switch = MaterialUI.Switch;
ReactDOM.render(
<Switch disabled={true} />
, document.getElementById('sample')
);

disableRipple

SwitchのdisableRippleの使い方の説明です。
オンにした際のぽわんと同心円状に広がる波模様のアニメーションの表示・非表示の設定をします。
ブール値を設定します。trueにすると波模様が無くなります。
※注意してください。ブール値を渡さなければいけないためdisableRipple="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。disableRippleと書くだけでdisableRipple={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
少しわかりづらいのでサンプルに波模様をしないものと、するものを並べました。
サンプルの1つ目はオンにしても波模様が起こりません。
2つ目はオンにしたときに●からぽわんと少し波模様のアニメーションがでます。
const Switch = MaterialUI.Switch;
ReactDOM.render(
<div>
  <Switch disableRipple={true} />
  <Switch disableRipple={false} />
</div>
, document.getElementById('sample')
);

edge

Switchのedgeの使い方の説明です。
スイッチの位置の左右の位置を微妙に変えます。
使用できる値はstart、end、そしてブール値のfalseのみです。
未設定のデフォルトはfalseになります。
少しわかりづらいのでサンプルを3つ並べました。
サンプルの1つ目はstartです。startを設定するとmargin-left:-8pxが適用され若干左寄りになります。
2つ目はendです。endを設定するとmargin-right:-8pxが適用され若干右寄りになります。
3つ目は未設定と同じブール値のfalseです。なにも適用されないので左右の幅が均等な中央に表示されます。
const Switch = MaterialUI.Switch;
ReactDOM.render(
<div>
  <span style={{border: '1px solid black'}}><Switch edge="start" /></span>
  <span style={{border: '1px solid black'}}><Switch edge="end" /></span>
  <span style={{border: '1px solid black'}}><Switch edge={false}/></span>
</div>
, document.getElementById('sample')
);

icon

Switchのiconの使い方の説明です。
オフにした際に表示するアイコンを設定します。
ノードを設定します。
サンプルの1つ目はオフの状態の時に●の代わりに「オフ」という文字を表示します。
2つ目はオフの状態の時に●の代わりに作ったアイコンを表示します。
オフの状態のアイコンはcheckedIconで設定します。
const Switch = MaterialUI.Switch;
const TukuttaDiv = <div>オフ</div>;
const createSvgIcon = MaterialUI.createSvgIcon;
const TukuttaIcon = createSvgIcon(<path d="M2 9h20v6h-20M9 2v20h6v-20z" />,'TukuttaIcon');
ReactDOM.render(
<div>
<Switch icon={TukuttaDiv} />
<Switch icon={<TukuttaIcon />} />
</div>
, document.getElementById('sample')
);

id

Switchのidの使い方の説明です。
スイッチは内部でcheckboxのINPUT要素が生成されます。
そのINPUT要素のid属性を設定できます。
生成されたHTMLを見るとid="idです"があるのがわかります。
Switchのidがinput要素に設定されます
const Switch = MaterialUI.Switch;
ReactDOM.render(
  <Switch id="idです" />
, document.getElementById('sample')
);

inputProps

SwitchのinputPropsの使い方の説明です。
スイッチは内部でcheckboxのINPUT要素が生成されます。
そのINPUT要素の属性を設定できます。
生成されたHTMLを見るとdata-test="inputPropsで設定した属性です"があるのがわかります。
SwitchのinputPropsでinput要素の属性を設定できます
const Switch = MaterialUI.Switch;
ReactDOM.render(
  <Switch inputProps={{"data-test":"inputPropsで設定した属性です"}} />
, document.getElementById('sample')
);

inputRef

SwitchのinputRefの使い方の説明です。
スイッチは内部でcheckboxのINPUT要素が生成されます。
そのINPUT要素のrefを設定できます。
サンプルではスイッチを切り替えるたびにコンソールにrefの内容を表示します。
SwitchのinputRefでinput要素のref属性を設定できます
const Switch = MaterialUI.Switch;
const Main = () => {
  const tukuttaRef = React.useRef(null);
  return (
    <Switch inputRef={tukuttaRef} onClick={()=>{console.log(tukuttaRef.current);}} />
  );
};
ReactDOM.render(
<Main />
, document.getElementById('sample')
);

onChange

SwitchのonChangeの使い方の説明です。
onChangeイベントです。
変更を検知してなにか処理したいときに使います。
eventで最終的に生成されるINPUT要素のデータが取得できます。
サンプルでは切り替えるたびに値と状態をアラートウインドに表示します。
const Switch = MaterialUI.Switch;
ReactDOM.render(
  <Switch onChange={(event)=>alert('変更されました。値:'+event.target.value+"。状態:"+event.target.checked)} value="スイッチの値です" />
, document.getElementById('sample')
);

required

Switchのrequiredの使い方の説明です。
INPUT要素のrequiredと同じです。
※注意してください。ブール値を渡さなければいけないためrequired="true"では正しくありません。
これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。requiredと書くだけでrequired={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
const Switch = MaterialUI.Switch;
ReactDOM.render(
  <Switch required={true} />
, document.getElementById('sample')
);

size

Switchのsizeの使い方の説明です。
sizeは大きさを設定します。
medium、small、自分で決めたサイズの3種類があります。
const Switch = MaterialUI.Switch;
ReactDOM.render(
<div>
  <Switch size="medium" />
  <Switch size="small"  />
</div>
, document.getElementById('sample')
);

sx

Switchのsxの使い方の説明です。
他のコンポーネントと共通のプロパティのため別ページにまとめました。
sxの解説に移動してください。

value

Switchのvalueの使い方の説明です。
スイッチは内部でcheckboxのINPUT要素が生成されます。
そのINPUT要素のvalue属性を設定できます。
const Switch = MaterialUI.Switch;
ReactDOM.render(
<Switch value="valueです" />
, document.getElementById('sample')
);

FormControlLabelでラベルをつけるく

FormControlLabelコンポーネントを使用するとSwitchにラベルをつけてよりわかりやすくできます。
FormControlLabelの詳しい使い方はFormControlLabelコンポーネントに移動してください。
const FormControlLabel = MaterialUI.FormControlLabel;
const Switch = MaterialUI.Switch;
ReactDOM.render(
<FormControlLabel control={<Switch />} label="スイッチのラベル (ここをクリックしてもスイッチを変更できる)" />
, 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
戻る

全体目次