javascript - reactjs中的自定义半星评级

在描述我的问题之前，我想宣布我正在做的星级只是为了学习和娱乐目的，因此我不使用外部图书馆。我也不会重新发明新的轮子。

我想到了通过开发半星评分来练习reactjs，这会给学习带来很多乐趣。仍然很有趣，但是我在制定半星评级时遇到了麻烦。我只能对非十进制数进行评分，例如1到5，但我也想要一半。在悬停时，如何确定鼠标指针是否在星号的一半内或单击时。

任何人都可以通过给出半星评级的想法来帮助我吗？我正在为星星使用ionon。这是我的代码

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。

最佳答案

编辑：而不是每个使用一个全星的5格，而是每个使用一个半星的10格。每个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()}
    />
  );
}

关于javascript - reactjs中的自定义半星评级，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45995748/