ふかしぎのReactさんぷるず

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

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

使用するための下準備

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

ToggleButtonの各プロパティの解説

MUIでのToggleButtonの扱い方の説明です。
トグルボタンです。
const ToggleButton = MaterialUI.ToggleButton;
ReactDOM.render(
<ToggleButton value="トグル">トグルボタン</ToggleButton>
, document.getElementById('sample')
);
一つでは意味がありません。たいていはToggleButtonGroupコンポーネントで複数のトグルボタンを束ねて使います。
ToggleButtonGroupがないと話にならないのでこれ以降のサンプルはToggleButtonGroupも使用します。
ToggleButtonGroupの詳細についてはToggleButtonGroupの解説ページに移動してください。
ToggleButtonGroupのonChangeで押したボタンとその値が取得できます。第1引数でそのボタン、第2引数で値です。
このサンプルでは第1引数がoshitaButton、第2引数がoshitaButtonNoValueです。
useStateでその値を設定し、ToggleButtonGroupのvalueが変わると自動的に一致するvalueを持つ子要素のToggleButtonが選択済みになります。
const ToggleButton = MaterialUI.ToggleButton;
const ToggleButtonGroup = MaterialUI.ToggleButtonGroup;
const Main = () => {
  const [sentakuValue, setSentakuValue] = React.useState('tb3');
  const henkou = (oshitaButton, oshitaButtonNoValue) => {
    setSentakuValue(oshitaButtonNoValue);
  };
  return (
    <div>
      <ToggleButtonGroup value={sentakuValue} onChange={henkou} exclusive={true}>
        <ToggleButton value="tb1">トグルボタン1</ToggleButton>
        <ToggleButton value="tb2">トグルボタン2</ToggleButton>
        <ToggleButton value="tb3">トグルボタン3</ToggleButton>
      </ToggleButtonGroup>
    </div>
  );
}
ReactDOM.render(
<Main />
, document.getElementById('sample')
);
ToggleButtonGroupのvalueを変えればいいだけなのでトグルボタンを押さなくても変更が出来ます。
「押したら1に変えるボタン」を押すとトグルボタン1が選択済みになります。
このサンプルはトグルボタン自体を押してもなにも変化はありません。ToggleButtonGroupのvalueが固定されているからです。
const Button = MaterialUI.Button;
const ToggleButton = MaterialUI.ToggleButton;
const ToggleButtonGroup = MaterialUI.ToggleButtonGroup;
const Main = () => {
  const [sentakuValue, setSentakuValue] = React.useState('tb3');
  const tb1NiHenkou = () => {setSentakuValue('tb1');};
  return (
    <div>
      <div><Button onClick={tb1NiHenkou} variant="outlined">押したら1に変えるボタン</Button></div>
      <ToggleButtonGroup value={sentakuValue} exclusive={true}>
        <ToggleButton value="tb1">トグルボタン1</ToggleButton>
        <ToggleButton value="tb2">トグルボタン2</ToggleButton>
        <ToggleButton value="tb3">トグルボタン3</ToggleButton>
      </ToggleButtonGroup>
    </div>
  );
}
ReactDOM.render(
<Main />
, document.getElementById('sample')
);

value*

ToggleButtonのvalue*の使い方の説明です。
ボタンの値を設定できます。
必須です。無いと
Warning: Failed prop type: The prop `value` is marked as required in `ForwardRef(ToggleButton)`, but its value is `undefined`.
と怒られます。
その値はToggleButtonGroupのonChangeで取得できます。
const ToggleButton = MaterialUI.ToggleButton;
const ToggleButtonGroup = MaterialUI.ToggleButtonGroup;
const Main = () => {
  const [sentakuValue, setSentakuValue] = React.useState('');
  const henkou = (oshitaButton, oshitaButtonNoValue) => {
    setSentakuValue(oshitaButtonNoValue);
  };
  return (
    <div>
      <div>選択中のボタンの値は「{sentakuValue}」です</div>
      <ToggleButtonGroup value={sentakuValue} onChange={henkou} exclusive={true}>
        <ToggleButton value="トグルボタン1です">トグルボタン1</ToggleButton>
        <ToggleButton value="トグルボタン2です">トグルボタン2</ToggleButton>
        <ToggleButton value="トグルボタン3です">トグルボタン3</ToggleButton>
      </ToggleButtonGroup>
    </div>
  );
}
ReactDOM.render(
<Main />
, document.getElementById('sample')
);

children

ToggleButtonのchildrenの使い方の説明です。
子要素のトグルボタンに表示する文字を設定できます。
ノードを設定できるので文字列でなくても構いません。
サンプルの1番目のボタンは文字列、2番目のボタンは変数のノードで太字で、3番目のボタンはコンポーネントのノードで表示しています。
const ToggleButton = MaterialUI.ToggleButton;
const ToggleBotan1Desu = 'トグルボタンいち';
const ToggleBotan2Desu = <span style={{"fontWeight":"bold"}}>トグルボタンに</span>;;
const ToggleBotan3Desu = () => <span>トグルボタンさん</span>;
ReactDOM.render(
<div>
  <ToggleButton value="tb1" children={ToggleBotan1Desu} />
  <ToggleButton value="tb2" children={ToggleBotan2Desu} />
  <ToggleButton value="tb3" children={<ToggleBotan3Desu />} />
</div>
, document.getElementById('sample')
);

classes

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

color

ToggleButtonのcolorの使い方の説明です。
色の設定はcolorで行います。
使えるのはstandard、primary、secondary、success、error、info、warning、それと自分で作った色です。
自分で色を作る場合は変数で定義しThemeProviderで適用します。
未設定のデフォルトはstandardになります。
standardはテーマのpalette.text.primaryが適用されます。標準で黒い文字に薄い灰色の背景になります。
サンプルで各トグルボタンをクリックすると色が変わっていることが分かります。
const ToggleButton = MaterialUI.ToggleButton;
const ToggleButtonGroup = MaterialUI.ToggleButtonGroup;
const ThemeProvider = MaterialUI.ThemeProvider;
const createTheme   = MaterialUI.createTheme;
const tukuttaTheme = createTheme({
  palette: {
    tukuttaIro: {
      main: '#ff00ff',
    },
  },
});
const Main = () => {
  const [sentakuValue, setSentakuValue] = React.useState('');
  const henkou = (oshitaButton, oshitaButtonNoValue) => {
    setSentakuValue(oshitaButtonNoValue);
  };
  return (
    <ThemeProvider theme={tukuttaTheme}>
      <ToggleButtonGroup value={sentakuValue} onChange={henkou} exclusive={true}>
        <ToggleButton color="standard"   value="tb1">standard色</ToggleButton>
        <ToggleButton color="primary"    value="tb2">primary色</ToggleButton>
        <ToggleButton color="secondary"  value="tb3">secondary色</ToggleButton>
        <ToggleButton color="success"    value="tb4">success色</ToggleButton>
        <ToggleButton color="error"      value="tb5">error色</ToggleButton>
        <ToggleButton color="info"       value="tb6">info色</ToggleButton>
        <ToggleButton color="warning"    value="tb7">warning色</ToggleButton>
        <ToggleButton color="tukuttaIro" value="tb8">自分で作った色</ToggleButton>
      </ToggleButtonGroup>
    </ThemeProvider>
  );
}
ReactDOM.render(
<Main />
, document.getElementById('sample')
);

disabled

ToggleButtonのdisabledの使い方の説明です。
トグルボタンを使用不可にします。
全体が薄い灰色になり使用不可になります。
ブール値を設定します。trueにすると不使用になります。
※注意してください。ブール値を渡さなければいけないためdisabled="true"では正しくありません。これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。disabledと書くだけでdisabled={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
サンプルは2つ目のボタンが使用不可になっているので薄い灰色になりクリックしても反応しません。
const ToggleButton = MaterialUI.ToggleButton;
const ToggleButtonGroup = MaterialUI.ToggleButtonGroup;
const Main = () => {
  const [sentakuValue, setSentakuValue] = React.useState('tb3');
  const henkou = (oshitaButton, oshitaButtonNoValue) => {
    setSentakuValue(oshitaButtonNoValue);
  };
  return (
    <ToggleButtonGroup value={sentakuValue} onChange={henkou} exclusive={true}>
      <ToggleButton value="tb1">トグルボタン1</ToggleButton>
      <ToggleButton value="tb2" disabled={true}>トグルボタン2</ToggleButton>
      <ToggleButton value="tb3">トグルボタン3</ToggleButton>
    </ToggleButtonGroup>
  );
}
ReactDOM.render(
<Main />
, document.getElementById('sample')
);

disableFocusRipple

ToggleButtonのdisableFocusRippleの使い方の説明です。
キーボードで移動しフォーカスした際の波模様の効果を無くします。
ブール値を設定します。trueにすると不使用になります。
※注意してください。ブール値を渡さなければいけないためdisableFocusRipple="true"では正しくありません。これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。disableFocusRippleと書くだけでdisableFocusRipple={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
サンプルでキーボードのTabキーを押して違いを確認してください。
disableFocusRippleをtrueにした方はタブキーで移動した際に波模様のアニメーションが無くなっています。
「トグルボタン波模様あり1」ボタンをクリックした後にタブキーを押すと違いが確認できます。
一度タブキーを押しても反応が無いように見えますが真ん中の「トグルボタン波模様なし2」にフォーカスが移動しています。さらにタブキーを押すと「トグルボタン波模様あり3」に移動します。こちらは波模様の効果があるので移動しているのがわかります。
シフトキー+タブキーで前に戻れます。シフトキー+タブキーとタブキーを繰り返して移動した際の違いを確認できます。
const ToggleButton = MaterialUI.ToggleButton;
const ToggleButtonGroup = MaterialUI.ToggleButtonGroup;
const Main = () => {
  const [sentakuValue, setSentakuValue] = React.useState('tb3');
  const henkou = (oshitaButton, oshitaButtonNoValue) => {
    setSentakuValue(oshitaButtonNoValue);
  };
  return (
    <ToggleButtonGroup value={sentakuValue} onChange={henkou} exclusive={true}>
      <ToggleButton value="tb1">トグルボタン波模様あり1</ToggleButton>
      <ToggleButton value="tb2" disableFocusRipple={true}>トグルボタン波模様なし2</ToggleButton>
      <ToggleButton value="tb3">トグルボタン波模様あり3</ToggleButton>
    </ToggleButtonGroup>
  );
}
ReactDOM.render(
<Main />
, document.getElementById('sample')
);

disableRipple

ToggleButtonのdisableRippleの使い方の説明です。
ボタンをクリックしたときにぽわんと波模様が出すか出さないかの設定をします。
ブール値を設定します。trueにすると波模様が出なくなります。
※注意してください。ブール値を渡さなければいけないためdisableRipple="true"では正しくありません。これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。disableRippleと書くだけでdisableRipple={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
サンプルの1つ目はtrueなのでクリックしても波模様が出なくなります。
2つ目はfalseなので波模様が出ます。
const ToggleButton = MaterialUI.ToggleButton;
const ToggleButtonGroup = MaterialUI.ToggleButtonGroup;
const Main = () => {
  const [sentakuValue, setSentakuValue] = React.useState('tb3');
  const henkou = (oshitaButton, oshitaButtonNoValue) => {
    setSentakuValue(oshitaButtonNoValue);
  };
  return (
    <ToggleButtonGroup value={sentakuValue} onChange={henkou} exclusive={true}>
      <ToggleButton value="tb1">トグルボタン波模様あり1</ToggleButton>
      <ToggleButton value="tb2" disableRipple={true}>トグルボタン波模様なし2</ToggleButton>
      <ToggleButton value="tb3">トグルボタン波模様あり3</ToggleButton>
    </ToggleButtonGroup>
  );
}
ReactDOM.render(
<Main />
, document.getElementById('sample')
);

fullWidth

ToggleButtonのfullWidthの使い方の説明です。
横幅一杯に表示します。
この横幅一杯は親要素の横幅一杯です。
ブール値を設定します。trueにすると横幅一杯になります。
※注意してください。ブール値を渡さなければいけないためfullWidth="true"では正しくありません。これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。fullWidthと書くだけでfullWidth={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
サンプルは親要素がwidth50%なのでtrueにすると画面の半分まで広がります。
const ToggleButton = MaterialUI.ToggleButton;
ReactDOM.render(
<div style={{"width":"50%"}}>
  <ToggleButton value="tb1" fullWidth={true}>トグルボタンtrue</ToggleButton>
  <ToggleButton value="tb2" fullWidth={false}>トグルボタンfalse</ToggleButton>
</div>
, document.getElementById('sample')
);

onChange

ToggleButtonのonChangeの使い方の説明です。
onChangeイベントです。
オンチェンジといいつつクリックしたら発火します。
onClickもありますが、実行順序はonClickの後にonChangeが実行されます。
押したボタンとその値が取得できます。第1引数でそのボタン、第2引数で値です。
このサンプルでは第1引数がoshitaButton、第2引数がoshitaButtonNoValueです。
クリックするとアラートウインドで値のtb1を表示します。
const ToggleButton = MaterialUI.ToggleButton;
ReactDOM.render(
  <ToggleButton value="tb1" onChange={(oshitaButton, oshitaButtonNoValue)=>{alert(oshitaButtonNoValue);}}>トグルボタン</ToggleButton>
, document.getElementById('sample')
);

onClick

ToggleButtonのonClickの使い方の説明です。
onChangeもありますが、実行順序はonClickの後にonChangeが実行されます。
押したボタンとその値が取得できます。第1引数でそのボタン、第2引数で値です。
このサンプルでは第1引数がoshitaButton、第2引数がoshitaButtonNoValueです。
クリックするとアラートウインドで値の「トグルボタンの値です」を表示します。
const ToggleButton = MaterialUI.ToggleButton;
ReactDOM.render(
  <ToggleButton value="トグルボタンの値です" onClick={(oshitaButton, oshitaButtonNoValue)=>{alert(oshitaButtonNoValue);}}>トグルボタン</ToggleButton>
, document.getElementById('sample')
);

onClickとonChangeの実行順序

実行順序はonClickの後にonChangeが実行されます。
const ToggleButton = MaterialUI.ToggleButton;
ReactDOM.render(
  <ToggleButton value="tb1" onChange={()=>{alert('2.onChange実行');}} onClick={()=>{alert('1.onClick実行');}}>実行順序チェック</ToggleButton>
, document.getElementById('sample')
);

selected

ToggleButtonのselectedの使い方の説明です。
トグルボタンを選択済みにするかの設定です。
選択済みになると背景が薄い灰色になります。
ブール値を設定します。trueにすると選択済みになります。
※注意してください。ブール値を渡さなければいけないためselected="true"では正しくありません。これは文字列のtrueを渡しているだけでブール値のtrueを渡してません。
書き方を省略できます。selectedと書くだけでselected={true}と同じ意味になります。
未設定のデフォルトはfalseになります。
const ToggleButton = MaterialUI.ToggleButton;
ReactDOM.render(
<div>
  <ToggleButton value="tb1" selected={true}>トグルボタンtrue</ToggleButton>
  <ToggleButton value="tb2" selected={false}>トグルボタンfalse</ToggleButton>
</div>
, document.getElementById('sample')
);

size

ToggleButtonのsizeの使い方の説明です。
ToggleButtonの大きさを設定できます。
文字列で設定します。使用できる値はsmallかmediumかlarge、もしくは文字列を指定できます。
未設定のデフォルトはmediumです。
const Button = MaterialUI.Button;
const ButtonGroup = MaterialUI.ButtonGroup;
ReactDOM.render(
<div>
  <ToggleButton value="tb1" size="small">小small</ToggleButton>
  <ToggleButton value="tb2" size="medium">中medium</ToggleButton>
  <ToggleButton value="tb3" size="large">大large</ToggleButton>
  <ToggleButton value="tb4">デフォルト</ToggleButton>
</div>
, document.getElementById('sample')
);

sx

ToggleButtonのsxの使い方の説明です。
他のコンポーネントと共通のプロパティのため別ページにまとめました。
sxの解説に移動してください。
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
戻る

全体目次