Morioh
Login
André Schürrle

André Schürrle

6 months ago

So erstellen Sie ein Sternebewertungssystem in React

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.

Inhaltsverzeichnis

  • Schritt 1: Neues Projekt erstellen
  • Schritt 2: Installieren Sie die React Material-Benutzeroberfläche
  • Schritt 3: Funktionskomponente erstellen
  • Schritt 4: Erstellen Sie eine einfache Sternebewertungskomponente
  • Schritt 5: Nur-Lese-Sternebewertung
  • Schritt 6: Sternebewertung deaktivieren
  • Schritt 7: Schweben Sie mit der Maus über das Sternebewertungs-Feedback
  • Schritt 8: Sternebewertung anpassen
  • Schritt 9: Hauptkomponente aktualisieren
  • Schritt 10: App im Browser testen

Schritt 1: Neues Projekt erstellen

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

Schritt 2: Installieren Sie die React Material-Benutzeroberfläche

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";

Schritt 3: Funktionskomponente erstellen

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

Schritt 4: Erstellen Sie eine einfache Sternebewertungskomponente

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

Schritt 5: Nur-Lese-Sternebewertung

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

Schritt 6: Sternebewertung deaktivieren

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

Schritt 7: Schweben Sie mit der Maus über das Sternebewertungs-Feedback

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

Schritt 8: Sternebewertung anpassen

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

Schritt 9: Hauptkomponente aktualisieren

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;

Schritt 10: App im Browser testen

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

Abschluss

In diesem Tutorial haben wir gelernt, wie man mit React MUI eine einfache Komponente für eine Sternebewertungsumfrage erstellt.

1.50 GEEK