ふかしぎのReactさんぷるず

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

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

使用するための下準備

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

Ratingの各プロパティの解説

MUIでのRatingの扱い方の説明です。
通販サイトでよく見る評価のやつです。
星をクリックして星3つなどにできます。
const Rating = MaterialUI.Rating;
ReactDOM.render(
<Rating />
, document.getElementById('sample')
);

classes

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

defaultValue

RatingのdefaultValueの使い方の説明です。
最初から星をいくつつけておくかの設定です。
管理されない設定なのでユーザー側で値を変更できます。
サンプルではdefaultValueに2を設定してるので最初から星2の状態で表示されます。
const Rating = MaterialUI.Rating;
ReactDOM.render(
<Rating defaultValue="2" />
, document.getElementById('sample')
);

disabled

Ratingのdisabledの使い方の説明です。
ブール値を設定します。不使用にするにはtrueに設定します。
不使用になると薄い灰色になりクリックしても反応しなくなります。
サンプルの上段は不使用状態です。下段は通常状態です。
不使用の方が通常よりもさらに薄い灰色になっているのがわかります。
const Rating = MaterialUI.Rating;
ReactDOM.render(
<div>
  <div><Rating disabled={true} /></div>
  <div><Rating disabled={false} /></div>
</div>
, document.getElementById('sample')
);

emptyIcon

RatingのemptyIconの使い方の説明です。
星が付いていないときに表示するものを設定できます。
ノードを設定できます。
サンプルでは星が付いていないときに☆ではなく▲を表示しています。
const Rating = MaterialUI.Rating;
const TukuttaSpan = <span>▲</span>;
ReactDOM.render(
<Rating emptyIcon={TukuttaSpan} />
, document.getElementById('sample')
);

emptyLabelText

RatingのemptyLabelTextの使い方の説明です。
省略

getLabelText

RatingのgetLabelTextの使い方の説明です。
省略(画面読み上げのスクリーンリーダー用)

highlightSelectedOnly

RatingのhighlightSelectedOnlyの使い方の説明です。
選択したものだけ星をつけるか、左端から選択した位置まで全て星をつけるかの設定です。
ブール値を設定します。trueに設定すると選択した一つのみ星がつきます。
デフォルトのfalseは左端から選択したものまで全て星がつきます。
const Rating = MaterialUI.Rating;
ReactDOM.render(
<Rating highlightSelectedOnly={true} />
, document.getElementById('sample')
);

icon

Ratingのiconの使い方の説明です。
星をつけたときに表示するものを設定します。
ノードを設定できます。
サンプルでは星が付いたときに●を表示しています。
const Rating = MaterialUI.Rating;
const TukuttaSpan = <span>●</span>;
ReactDOM.render(
<Rating icon={TukuttaSpan} />
, document.getElementById('sample')
);

IconContainerComponent

RatingのIconContainerComponentの使い方の説明です。
星あり星なしのアイコンを生成する際にどの要素で囲むかを設定できます。
サンプルでは星が付いていない状態を☆から未に変更して、上段はSTRONG要素で囲んでいます。下段はなにもしていません。STRONG要素を指定したほうはその要素で作られたため太字になっています。
const Rating = MaterialUI.Rating;
ReactDOM.render(
<div>
  <div><Rating IconContainerComponent="strong" emptyIcon={<span>未</span>} /></div>
  <div><Rating emptyIcon={<span>未</span>} /></div>
</div>
, document.getElementById('sample')
);

max

Ratingのmaxの使い方の説明です。
星を付けることができる最大数を設定できます。
デフォルトは5です。
サンプルでは7に設定したので未選択の☆が7個並んでいます。
注意してください数値を設定しなければいけません。
max="7"にすると7という文字列を渡したことになり正しく動作しません。
max={7}と数値を渡す必要があります。
const Rating = MaterialUI.Rating;
ReactDOM.render(
<Rating max={7} />
, document.getElementById('sample')
);

name

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

onChange

RatingのonChangeの使い方の説明です。
INPUT要素のonChangeと同じです。
星が選択されたときに実行されます。
event.target.valueで値を取得できます。
サンプルではクリックするとアラートウインドを出し値を表示します
const Rating = MaterialUI.Rating;
ReactDOM.render(
<Rating  onChange={(event)=>{alert('クリックされました。値は'+event.target.value)}} />
, document.getElementById('sample')
);

onChangeActive

RatingのonChangeActiveの使い方の説明です。
INPUT要素のonChangeと同じです。
星の上を移動して星の状態が変更されているとき実行されます。
星の上からはずれたときも星の状態が変更されているので実行されます。その場合の値は-1です。
valueで値を取得できます。
サンプルでは上を移動すると開発ツールのコンソールに値を表示します。
const Rating = MaterialUI.Rating;
ReactDOM.render(
<Rating  onChangeActive={(event,value)=>{console.log('上を移動中。値は'+value)}} />
, document.getElementById('sample')
);

precision

Ratingのprecisionの使い方の説明です。
変更できる最低単位です。
デフォルトは1なので星を1つずつ選べます。
precisionを2にした場合は2、4、そして残りの5までの3パターンしか選択できなくなります。
1番目をクリックしたとしても2番目までが変更されます。
3番目をクリックしたとしても4番目までが変更されます。
注意してください数値を設定しなければいけません。
precision="2"にすると2という文字列を渡したことになり正しく動作しません。
precision={2}と数値を渡す必要があります。
const Rating = MaterialUI.Rating;
ReactDOM.render(
<Rating precision={2} />
, document.getElementById('sample')
);

readOnly

RatingのreadOnlyの使い方の説明です。
ブール値を設定します。trueにすると変更できなくなります。
サンプルの上段はtrueのため変更が出来ません。下段はfalseなので変更できます。
const Rating = MaterialUI.Rating;
ReactDOM.render(
<div>
  <div><Rating readOnly={true} defaultValue="2" /></div>
  <div><Rating readOnly={false} defaultValue="2" /></div>
</div>
, document.getElementById('sample')
);

size

Ratingのsizeの使い方の説明です。
表示するサイズを変更できます。
設定できるのはsmall、medium、largeと独自に定義した文字列です。
デフォルトはmediumです。
サンプルはsmall、medium、large、そしてデフォルトの順に並んでいます。
2番目のmediumと最後のデフォルトは同じ大きさになります。
const Rating = MaterialUI.Rating;
ReactDOM.render(
<div>
  <div>小<Rating size="small" /></div>
  <div>中<Rating size="medium" /></div>
  <div>大<Rating size="large" /></div>
  <div>未設定<Rating /></div>
</div>
, document.getElementById('sample')
);

sx

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

value

Ratingのvalueの使い方の説明です。
星を付ける値を設定できます。
管理された値のためdefaultValueと違いユーザー側が変更できません。変更しようとしても表示が元に戻ります。
const Rating = MaterialUI.Rating;
ReactDOM.render(
<Rating value="2" />
, 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
戻る

全体目次