Matarialize中文技术社区-Material UI 中 Rating 组件的使用详解

Material UI 中 Rating 组件的使用详解

smartzeng 2024-09-29 22:10:07

186 Rating 专栏

Material UI 提供的 Rating 组件是一种用于选择评分的 UI 组件，常用于用户反馈、产品评分等场景。它不仅支持简单的星级评分，还可以进行自定义样式、禁用状态等设置。本文将详细介绍 Rating 组件的使用，包括基本用法、属性、方法，以及与其他组件结合的示例。

1. 安装 Material UI

如果尚未安装 Material UI，可以通过以下命令进行安装：

npm install @mui/material @emotion/react @emotion/styled

2. 基本用法

2.1 简单的 Rating 示例

以下是一个基本的 Rating 组件示例：

import React from 'react';
import Rating from '@mui/material/Rating';
import Box from '@mui/material/Box';

function BasicRating() {
    const [value, setValue] = React.useState(2);

    return (
        <Box>
            <Rating
                name="simple-controlled"
                value={value}
                onChange={(event, newValue) => {
                    setValue(newValue);
                }}
            />
        </Box>
    );
}

export default BasicRating;

代码解析

Rating: 这是主要的评分组件。name 用于唯一标识该评分组件，value 是当前评分值，onChange 事件处理函数在评分变化时被调用。

3. Rating 属性

3.1 常用属性

name: 用于识别 Rating 组件，通常在表单中使用。
value: 当前评分的值。
onChange: 处理评分变化的回调函数。
precision: 允许使用的评分精度（例如 0.5）。
readOnly: 布尔值，设置为 true 时用户无法更改评分。
disabled: 布尔值，设置为 true 时评分组件不可用。

3.2 示例：精确评分

import React from 'react';
import Rating from '@mui/material/Rating';
import Box from '@mui/material/Box';

function PrecisionRating() {
    const [value, setValue] = React.useState(2.5);

    return (
        <Box>
            <Rating
                name="precision-rating"
                value={value}
                precision={0.5}
                onChange={(event, newValue) => {
                    setValue(newValue);
                }}
            />
        </Box>
    );
}

export default PrecisionRating;

代码解析

precision: 在这个示例中，评分精度被设置为 0.5，允许用户选择如 2.5 的评分。

4. 结合其他组件使用

4.1 结合 FormControl 使用

可以将 Rating 组件与 FormControl 结合，来创建一个更复杂的表单结构。

import React from 'react';
import { FormControl, FormLabel, Rating, FormHelperText } from '@mui/material';

function RatingWithFormControl() {
    const [value, setValue] = React.useState(null);
    const [error, setError] = React.useState(false);

    const handleChange = (event, newValue) => {
        setValue(newValue);
        if (newValue === null) {
            setError(true);
        } else {
            setError(false);
        }
    };

    return (
        <FormControl error={error}>
            <FormLabel component="legend">评分</FormLabel>
            <Rating
                name="controlled-rating"
                value={value}
                onChange={handleChange}
            />
            {error && <FormHelperText>评分是必需的</FormHelperText>}
        </FormControl>
    );
}

export default RatingWithFormControl;

代码解析

FormControl: 提供了更好的结构化和错误状态管理。
FormHelperText: 在评分未选择时显示错误信息。

4.2 结合 Dialog 使用

将 Rating 组件放入 Dialog 中，可以在弹窗中请求用户评分。

import React, { useState } from 'react';
import { Fab, Dialog, DialogTitle, DialogContent, DialogActions, Button, Rating } from '@mui/material';
import AddIcon from '@mui/icons-material/Add';

function RatingInDialog() {
    const [open, setOpen] = useState(false);
    const [value, setValue] = useState(3);

    const handleClickOpen = () => {
        setOpen(true);
    };

    const handleClose = () => {
        setOpen(false);
    };

    return (
        <div>
            <Fab color="primary" onClick={handleClickOpen}>
                <AddIcon />
            </Fab>
            <Dialog open={open} onClose={handleClose}>
                <DialogTitle>请给我们评分</DialogTitle>
                <DialogContent>
                    <Rating
                        name="dialog-rating"
                        value={value}
                        onChange={(event, newValue) => {
                            setValue(newValue);
                        }}
                    />
                </DialogContent>
                <DialogActions>
                    <Button onClick={handleClose} color="primary">取消</Button>
                    <Button onClick={handleClose} color="primary">提交</Button>
                </DialogActions>
            </Dialog>
        </div>
    );
}

export default RatingInDialog;

代码解析

通过 Dialog 组件，让用户在弹窗中进行评分，增强交互性。

5. 自定义样式

您可以使用 sx 属性或自定义 CSS 来改变 Rating 组件的样式。

5.1 使用 `sx` 属性

import React from 'react';
import Rating from '@mui/material/Rating';
import Box from '@mui/material/Box';

function StyledRating() {
    const [value, setValue] = React.useState(3);

    return (
        <Box>
            <Rating
                name="styled-rating"
                value={value}
                onChange={(event, newValue) => {
                    setValue(newValue);
                }}
                sx={{
                    '& .MuiRating-iconFilled': {
                        color: 'gold',
                    },
                    '& .MuiRating-iconHover': {
                        color: 'orange',
                    },
                }}
            />
        </Box>
    );
}

export default StyledRating;