reactjs中的自定半星评级

Question

在描述我的问题之前，我想宣布我正在做的星级评定只是为了学习和有趣的目的所以我没有使用外部库。我也没有重新发明新车轮。

我想通过培养半星评级来练习反应，这会给学习带来很多乐趣。它仍然很有趣，但我在开发半星评级时遇到了麻烦。我只能像1到5那样评价非小数，但我也想要半个部分。在悬停时如何判断我的鼠标指针是否在星的一半或点击时。

任何人都可以通过提出如何进行半星评级来帮助我吗？我正在为这颗恒星使用离子。这是我的代码

class Rating extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      rating: this.props.rating || null,
      temp_rating: null
    };
  }

  handleMouseover(rating) {
    this.setState(prev => ({
      rating,
      temp_rating: prev.rating
    }));
  }

  handleMouseout() {

    this.setState(prev => ({
      rating: prev.temp_rating
    }));
  }

  rate(rating) {
    this.setState({
      rating,
      temp_rating: rating
    });
  }

  render() {
    const { rating } = this.state;
    let stars = [];
    for (let i = 0; i < 5; i++) {
      console.log('i', i);
      let klass = "ion-ios-star-outline";
      if (this.state.rating >= i && this.state.rating !== null) {
        klass = "ion-ios-star";
      }
      stars.push(
        <i
          className={klass}
          onMouseOver={() => this.handleMouseover(i)}
          onClick={() => this.rate(i)}
          onMouseOut={() => this.handleMouseout()}
        />
      );
    }
    return (
      <div className="rating">
        {stars}
      </div>
    );
  }
}

export default Rating;

对于演示，您可以看到https://codesandbox.io/s/ll9kpn5lvm。

Answer 1

编辑：不是使用5个div，每个div都有一个完整的星星，而是使用10个div，每个div有半个星。每个div太窄而无法容纳一个完整的星星，你可以使用overflow: hidden隐藏另一半。

实施例： https://codesandbox.io/s/xpl2wjpyoq

我把样式放在组件中，因为我找不到CSS表，但你应该把它包含在CSS中。

相关代码：

for (let i = 0; i < 10; i++) {
  let klass = "ion-ios-star-outline";
  if (this.state.rating >= i && this.state.rating !== null) {
    klass = "ion-ios-star";
  }
  stars.push(
    <i
      style={{ 
          display: "inline-block", 
          width: "7px", 
          overflow: "hidden", 
          direction: (i%2===0) ? "ltr" : "rtl"
      }}
      className={klass}
      onMouseOver={() => this.handleMouseover(i)}
      onClick={() => this.rate(i)}
      onMouseOut={() => this.handleMouseout()}
    />
  );
}