Ein Sternebewertungssystem ist eine weit verbreitete Methode, um die Qualität oder den wahrgenommenen Wert einer Sache anhand einer Sterneskala anzugeben.
In diesem Tutorial erfahren Sie, wie Sie eine Sternebewertungskomponente in React mithilfe des React-Material-UI-Moduls mit einer Funktionskomponente erstellen. Um in React JS mithilfe der Material-Benutzeroberfläche ein Click-and-Hover-Sternebewertungssystem zu erstellen, führen wir die folgenden Schritte aus.
Auf Ihrem Computer muss node, npm eingerichtet sein. Stellen Sie sicher, dass Sie die neue Anwendung mit dem folgenden Befehl erstellen.
npx create-react-app react-blog-app
Navigieren Sie zum Projektverzeichnis.
cd react-blog-app
In diesem Abschnitt führen wir Sie durch das Hinzufügen der wesentlichen Elemente dieses Tutorials.
Fahren Sie fort und führen Sie den Befehl aus, um React Material UI und bestimmte andere Pakete zu installieren.
npm i @mui/material @emotion/react @emotion/styled --legacy-peer-deps
npm install @fontsource/roboto --legacy-peer-deps
Nachdem die Module hinzugefügt wurden, müssen Sie das mit React MUI verknüpfte CSS in die Datei App.css importieren.
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap");
@import "@fontsource/roboto/300.css";
@import "@fontsource/roboto/400.css";
@import "@fontsource/roboto/500.css";
@import "@fontsource/roboto/700.css";
In diesem Abschnitt müssen Sie das Verzeichnis components/ zusammen mit der Datei StarRating.js< erstellen /span> Datei.
import React from 'react'
function StarRating() {
return (
<div>StarRating</div>
)
}
export default StarRating
Um die Star Rating-Komponente zu erstellen, müssen Sie den gesamten Code, sogar Zeile für Zeile, in die Datei components/StarRating.js einfügen.
import * as React from "react";
import Box from "@mui/material/Box";
import Rating from "@mui/material/Rating";
export default function StarRating() {
const [value, setValue] = React.useState(2);
return (
<Box
sx={{
"& > legend": { mt: 2 },
}}
>
<Rating
name="simple-controlled"
value={value}
onChange={(event, newValue) => {
setValue(newValue);
}}
/>
</Box>
);
}
Ein schreibgeschütztes Sterne-Feedback-Bewertungssystem in React JS kann durch einfaches Übergeben der Eigenschaften name="read-only" und readOnly erstellt werden
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 StarRating() {
const [value, setValue] = React.useState(2);
return (
<Box
sx={{
"& > legend": { mt: 2 },
}}
>
<Typography component="legend">Read only</Typography>
<Rating name="read-only" value={value} readOnly />
</Box>
);
}
In dieser Phase werden wir uns genauer ansehen, wie man die Star-Review-Komponente in React deaktiviert.
Es ist ziemlich einfach. Wir müssen nur name=“disabled“ und deaktivierte Requisiten festlegen.
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 StarRating() {
const [value, setValue] = React.useState(2);
return (
<Box
sx={{
"& > legend": { mt: 2 },
}}
>
<Typography component="legend">Disabled</Typography>
<Rating name="disabled" value={value} disabled />
</Box>
);
}
Beim Hover wird jetzt eine Beschriftung angezeigt, damit der Benutzer den richtigen Bewertungswert auswählen kann.
Im Codebeispiel werden wir die Event-Handler-Requisiten onChange und onChangeActive verwenden.
import * as React from "react";
import Rating from "@mui/material/Rating";
import Box from "@mui/material/Box";
import StarIcon from "@mui/icons-material/Star";
const labels = {
0.5: "Useless",
1: "Useless+",
1.5: "Poor",
2: "Poor+",
2.5: "Ok",
3: "Ok+",
3.5: "Good",
4: "Good+",
4.5: "Excellent",
5: "Excellent+",
};
function getLabelText(value) {
return `${value} Star${value !== 1 ? "s" : ""}, ${labels[value]}`;
}
export default function StarRating() {
const [value, setValue] = React.useState(2);
const [hover, setHover] = React.useState(-1);
return (
<Box
sx={{
width: 200,
display: "flex",
alignItems: "center",
}}
>
<Rating
name="hover-feedback"
value={value}
precision={0.5}
getLabelText={getLabelText}
onChange={(event, newValue) => {
setValue(newValue);
}}
onChangeActive={(event, newHover) => {
setHover(newHover);
}}
emptyIcon={<StarIcon style={{ opacity: 0.55 }} fontSize="inherit" />}
/>
{value !== null && (
<Box sx={{ ml: 2 }}>{labels[hover !== -1 ? hover : value]}</Box>
)}
</Box>
);
}
Basierend auf unseren Anforderungen und unserem bevorzugten Szenario können wir die Größe der Sternebewertung mithilfe der Größenstütze ändern.
import * as React from 'react';
import Rating from '@mui/material/Rating';
import Stack from '@mui/material/Stack';
export default function StarRating() {
return (
<Stack spacing={1}>
<Rating name="size-small" defaultValue={3} size="small" />
<Rating name="size-medium" defaultValue={2} />
<Rating name="size-large" defaultValue={3} size="large" />
</Stack>
);
}
Wenn es um die Anpassung von Star-Feedback-Bewertungen geht, bietet uns React MUI die größtmögliche Flexibilität.
Wir können das Sternsymbol in ein beliebiges Symbol ändern und sogar die Anzahl der Sterne erhöhen oder verringern.
import * as React from "react";
import { styled } from "@mui/material/styles";
import Box from "@mui/material/Box";
import Rating from "@mui/material/Rating";
import FavoriteIcon from "@mui/icons-material/Favorite";
import FavoriteBorderIcon from "@mui/icons-material/FavoriteBorder";
import Typography from "@mui/material/Typography";
const StyledRating = styled(Rating)({
"& .MuiRating-iconFilled": {
color: "#ff6d75",
},
"& .MuiRating-iconHover": {
color: "#ff3d47",
},
});
export default function StarRating() {
return (
<Box
sx={{
"& > legend": { mt: 2 },
}}
>
<Typography component="legend">Custom icon and color</Typography>
<StyledRating
name="customized-color"
defaultValue={2}
getLabelText={(value) => `${value} Heart${value !== 1 ? "s" : ""}`}
precision={0.5}
icon={<FavoriteIcon fontSize="inherit" />}
emptyIcon={<FavoriteBorderIcon fontSize="inherit" />}
/>
<Typography component="legend">10 stars</Typography>
<Rating name="customized-10" defaultValue={2} max={10} />
</Box>
);
}
Zuvor haben wir die Sternkomponente gebildet – allein wird es jedoch nicht funktionieren.
Diese Komponente muss in die App eingefügt werden; Sie können dies tun, indem Sie es in die Hauptdatei App.js importieren.
import React from "react";
import StarRating from "./components/StarRating";
function App() {
return (
<div>
<h2>React Material UI Star Rating Example</h2>
<StarRating />
</div>
);
}
export default App;
Nun, dieser ausführliche Leitfaden soll Ihnen zeigen, wie die Dinge in einem realen Szenario funktionieren. Daher starten wir den App-Server mit dem vorgeschlagenen Befehl.
npm start
Wenn Sie die Funktion lokal erstellen, können Sie diese URL zum Ausführen der App verwenden.
http://localhost:3000
In diesem Tutorial haben wir gelernt, wie man mit React MUI eine einfache Komponente für eine Sternebewertungsumfrage erstellt.