时间戳

首页 > 解决方案 > 如何在 Reactjs 中创建基于平均（十进制）的星级评分？

reactjs - 如何在 Reactjs 中创建基于平均（十进制）的星级评分？

问题描述

我创建了适用于整个整数的星级评分功能。但我想修改它并实现平均星级功能。基于小数点的功能。在下面的代码中，它采用 'Selected' props 值为 2.5，但如何按十进制值显示一半选定的星（如 2.5、3.4、2.3 .. 等）？

这是代码： 

import React from "react";
import ReactDOM from "react-dom";
import PropTypes from "prop-types";
import './style.scss'

const Star = ({ selected = false, onClick = f => f }) => {
  console.log("selected : ", selected);

  return (
    <div className={selected ? "store-card-rating selected" : "store-card-rating"} onClick={onClick} ><i className="fas fa-star empty-star"/></div>
  );
};

Star.propTypes = {
    selected: PropTypes.bool,
    onClick: PropTypes.func
  };
  
  class StarRating extends React.Component {
    constructor(props) {
      super(props);
      this.state = { starsSelected :this.props.Selected};
      this.change = this.change.bind(this);
    }
  
    change(starsSelected) {
      this.setState({ starsSelected: starsSelected });
    }
  
    render() {
      const { totalStars } = this.props;
      const { starsSelected } = this.state;
  
      return (
        <div className="star-rating">
          {[...Array(totalStars)].map((n, i) => (
            <Star
              key={i}
              selected={i < starsSelected}
              onClick={() => this.change(i + 1)}
            />
          ))}
          <p>
            {starsSelected} of {totalStars} stars
          </p>
        </div>
      );
    }
  }
  
  StarRating.propTypes = {
    totalStars: PropTypes.number
  };
  
  StarRating.defaultProps = {
    totalStars: 5
  };

const rootElement = document.getElementById("root");
ReactDOM.render(<StarRating totalStars={5} Selected={2} />, rootElement);

标签： reactjs

解决方案

解决方案 1

react-rating基于 FontAwesome 图标，有一个很棒的软件包，它完全符合您的要求。

解决方案 2

假设可以，您可以设计星星右侧部分的 0.1 到 0.9 部分，并将其显示在已显示的完整星星上，例如，以灰色显示。它可能看起来有点像这样（有心）： .2 一颗心.9 颗心

推荐阅读