Создание динамической системы оценки по звездам в React
Если речь идет об отзывах пользователей, то звездные рейтинги становятся повсеместным и интуитивно понятным способом выражения своего мнения. В этой статье мы рассмотрим процесс создания динамической системы звездного рейтинга с помощью React. Этот интерактивный компонент позволяет пользователям легко оценивать что-либо по звездной системе и даже выбирать количество звезд.
Настройка базовых параметров
Для начала импортируем необходимые стили и зависимости React:
В этом фрагменте мы импортируем необходимый CSS-файл для стилизации и React вместе с хуком useState для управления состоянием в функциональных компонентах.
import "./styles.css";
import React, { useState } from "react";Управление состоянием
Мы используем хук useState для управления тремя элементами состояния: rating (для хранения выбранной пользователем оценки), hover (для отслеживания текущей наведенной звезды) и totalStars (для управления общим количеством отображаемых звезд).
const [rating, setRating] = useState(null);
const [hover, setHover] = useState(null);
const [totalStars, setTotalStars] = useState(5);Отображение звезд
Этот фрагмент кода динамически генерирует элементы звезды на основе состояния totalStars. Он использует метод Array.from() для создания массива заданной длины, а затем отображает этот массив для создания элементов звезды. Каждая звезда представлена в виде радиовхода и элемента span, отображающего символ звезды (★). Цвет звезд меняется в зависимости от текущего рейтинга и состояния наведения.
{[...Array(totalStars)].map((star, index) => {
const currentRating = index + 1;
return (
<label key={index}>
<input
type="radio"
name="rating"
value={currentRating}
onChange={() => setRating(currentRating)}
/>
<span
className="star"
style={{
color:
currentRating <= (hover || rating) ? "#ffc107" : "#e4e5e9"
}}
onMouseEnter={() => setHover(currentRating)}
onMouseLeave={() => setHover(null)}
>
★
</span>
</label>
);
})}Общее количество звезд
Эта часть кода предоставляет поле ввода под компонентом звездного рейтинга, позволяющее пользователям изменять общее количество отображаемых звезд. Функция handleChange обновляет состояние totalStars на основе значения, введенного пользователем в поле ввода.
<label style={{ fontWeight: 400 }}>
Number of stars:
<input
style={{ marginLeft: "12px", maxWidth: "50px" }}
onChange={handleChange}
value={totalStars}
type="number"
min={1}
/>
</label>Стилизация компонента
.App {
font-family: sans-serif;
text-align: center;
}
input[type="radio"] {
display: none;
}
.star {
cursor: pointer;
font-size: 2rem;
margin: 5px;
}Ссылка на рабочий код: https://dhmyh4.csb.app/
Заключение
Таким образом, динамическая система оценки звезд на основе React демонстрирует слияние пользовательского опыта и технологических инноваций. Благодаря интерактивным функциям, таким как эффект наведения и настраиваемое количество звезд, этот компонент демонстрирует универсальность современной веб-разработки. Предоставляя пользователям возможность легко оставлять отзывы, он демонстрирует важность ориентированного на пользователя дизайна при создании привлекательных и отзывчивых веб-приложений.
Не стесняйтесь настраивать и расширять эту основу, создавая более сложные функции расчета или интегрируя ее в более крупные приложения. Если у вас возникнут вопросы или потребуется дополнительная помощь, не стесняйтесь спрашивать! Счастливого кодинга!
