react实现评分功能

实现评分功能的方法

在React中实现评分功能可以通过多种方式完成，以下是一些常见的实现方法。

使用第三方库

使用现成的评分组件库可以快速实现功能，例如react-rating或react-stars。安装库后，直接引入并使用即可。

import React from 'react';
import Rating from 'react-rating';

const StarRating = () => {
  const [rating, setRating] = React.useState(0);

  return (
    <Rating
      initialRating={rating}
      onChange={setRating}
      emptySymbol="far fa-star"
      fullSymbol="fas fa-star"
    />
  );
};

export default StarRating;

自定义评分组件

如果需要完全自定义评分组件，可以通过状态管理和事件处理实现。以下是一个简单的自定义评分组件示例。

import React from 'react';
import { FaStar } from 'react-icons/fa';

const StarRating = () => {
  const [rating, setRating] = React.useState(0);
  const [hover, setHover] = React.useState(0);

  return (
    <div>
      {[...Array(5)].map((_, index) => {
        const ratingValue = index + 1;
        return (
          <label key={index}>
            <input
              type="radio"
              name="rating"
              value={ratingValue}
              onClick={() => setRating(ratingValue)}
            />
            <FaStar
              className="star"
              color={ratingValue <= (hover || rating) ? "#ffc107" : "#e4e5e9"}
              size={30}
              onMouseEnter={() => setHover(ratingValue)}
              onMouseLeave={() => setHover(0)}
            />
          </label>
        );
      })}
    </div>
  );
};

export default StarRating;

添加半星评分

如果需要更精细的评分，可以实现半星评分功能。以下是一个支持半星评分的组件示例。

import React from 'react';
import { FaStar, FaStarHalfAlt } from 'react-icons/fa';

const HalfStarRating = () => {
  const [rating, setRating] = React.useState(0);
  const [hover, setHover] = React.useState(0);

  return (
    <div>
      {[...Array(5)].map((_, index) => {
        const ratingValue = index + 1;
        return (
          <label key={index}>
            <input
              type="radio"
              name="rating"
              value={ratingValue}
              onClick={() => setRating(ratingValue)}
              style={{ display: 'none' }}
            />
            {hover >= ratingValue || rating >= ratingValue ? (
              <FaStar
                color="#ffc107"
                size={30}
                onMouseEnter={() => setHover(ratingValue)}
                onMouseLeave={() => setHover(0)}
              />
            ) : (
              <FaStarHalfAlt
                color="#e4e5e9"
                size={30}
                onMouseEnter={() => setHover(ratingValue)}
                onMouseLeave={() => setHover(0)}
              />
            )}
          </label>
        );
      })}
    </div>
  );
};

export default HalfStarRating;

样式优化

为了提升用户体验，可以添加CSS样式优化评分组件的外观。以下是一个简单的样式示例。

.star {
  cursor: pointer;
  transition: color 0.2s;
}

.star:hover {
  color: #ffc107;
}

表单集成

将评分组件集成到表单中，方便提交评分数据。以下是一个表单集成的示例。

import React from 'react';
import { FaStar } from 'react-icons/fa';

const RatingForm = () => {
  const [rating, setRating] = React.useState(0);
  const [hover, setHover] = React.useState(0);

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Submitted rating:', rating);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        {[...Array(5)].map((_, index) => {
          const ratingValue = index + 1;
          return (
            <label key={index}>
              <input
                type="radio"
                name="rating"
                value={ratingValue}
                onClick={() => setRating(ratingValue)}
                style={{ display: 'none' }}
              />
              <FaStar
                color={ratingValue <= (hover || rating) ? "#ffc107" : "#e4e5e9"}
                size={30}
                onMouseEnter={() => setHover(ratingValue)}
                onMouseLeave={() => setHover(0)}
              />
            </label>
          );
        })}
      </div>
      <button type="submit">Submit Rating</button>
    </form>
  );
};

export default RatingForm;

通过以上方法，可以在React中灵活实现评分功能，满足不同场景的需求。