【React】Ratingコンポーネントの星の数を制御する【MaterialUI】
Ratingコンポーネントの星の数を制御したい
Ratingコンポーネントでデフォルトの5つ星から、数を増減させたりゼロにさせないようにしたい場面に遭遇しました。
ここではその方法について記載します。
なお、星をゼロにしない方法については、APIに記載がなく割と無理やりな実装になっています(泣)
実装方法
最大値の設定
最大値の設定方法についてです。
最大値を設定すると、その分だけ星が表示されるようになります。
下記では最大値を8に設定したものになります。
import * as React from 'react';
import Box from '@mui/material/Box';
import Rating from '@mui/material/Rating';
import Typography from '@mui/material/Typography';
export default function BasicRating() {
const [value, setValue] = React.useState(2);
return (
<Box
sx={{
'& > legend': { mt: 2 },
}}
>
<Rating
name="simple-controlled"
value={value}
max={8}
onChange={(event, newValue) => {
setValue(newValue);
}}
/>
</Box>
);
}
結果
最小値の設定
最小値の設定方法です。こちらはMaterialUIのAPIに記載がありませんでした。
APIにはmaxがあったのだから、「min」でいけると思ったのですが、機能しませんでした。。。なので、ここでは原始的な条件分岐によって成業するようにしました。
下記のソースでは、星をゼロにしようとしても1を最小値として設定します。
ちなみに、初期の設定のままだと星をゼロ設定したときに、valueの値がnullになってしまい、いざ自作アプリに組み込もうとしたときには、0ではなくnullになっていてエラー。。。みたいになるので注意です。
以下では、星がゼロの時は1にするような条件分岐を作って、その問題を回避しています。
import * as React from 'react';
import Box from '@mui/material/Box';
import Rating from '@mui/material/Rating';
import Typography from '@mui/material/Typography';
export default function BasicRating() {
const [value, setValue] = React.useState(2);
function onChangeHandle(newValue) {
if(newValue === null){
setValue(1)
}else{
setValue(newValue)
}
}
return (
<Box
sx={{
'& > legend': { mt: 2 },
}}
>
<Rating
name="simple-controlled"
value={value}
onChange={(event, newValue) => {
onChangeHandle(newValue);
}}
/>
</Box>
);
}
結果
参考
Author And Source
この問題について(【React】Ratingコンポーネントの星の数を制御する【MaterialUI】), 我々は、より多くの情報をここで見つけました https://qiita.com/GalaxyNeko/items/e2e10462cd276648c0b9著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .