【React】Ratingコンポーネントの星の数を制御する【MaterialUI】

Ratingコンポーネントの星の数を制御したい

Ratingコンポーネントでデフォルトの５つ星から、数を増減させたりゼロにさせないようにしたい場面に遭遇しました。

ここではその方法について記載します。

なお、星をゼロにしない方法については、APIに記載がなく割と無理やりな実装になっています(泣)

実装方法

最大値の設定

最大値の設定方法についてです。 最大値を設定すると、その分だけ星が表示されるようになります。

下記では最大値を8に設定したものになります。

Ratingコンポーネントに最大値を設定

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にするような条件分岐を作って、その問題を回避しています。

Ratingコンポーネントに最小値を設定

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>
  );
}

結果

参考