Javascript 允许用户从0.5到5进行评分

我制作了一个评分组件，用户可以在其中评分，但存在一个问题。用户可以从0到4.5（0，0.5，1，1.5到4.5）进行评分，这是意外的行为，相反，我希望用户从0.5到5进行评分。我怎么做到的？这是星级评定的组成部分

这是解决办法

等级扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
评级：props.defaultRating | | null，
maxRating:props.maxRating | | null，
温度等级：空
};
}
组件将接收道具（下一步）{
if（nextrops.defaultRating！==this.props.defaultRating）{
这是我的国家({
评级：nextrops.defaultRating，
maxRating:nextProps.maxRating
});
}
}
搬运室（额定值）{
this.setState（prev=>({
评级：评级/2，
温度等级：上一等级
}));
}
handleMouseout（）{
//this.state.rating=this.state.temp_rating；
//this.setState（{rating:this.state.rating}）；
this.setState（prev=>({
额定值：上一个温度额定值
}));
}
比率（评级）{
这是我的国家(
{
评级：评级/2，
温度额定值：额定值/2
},
（）=>this.props.handleRate（this.state.rating）
);
}
render（）{
const{rating}=this.state；
让星星=[]；
for（设i=0；i<11；i++）{
让klass=“icon-star-o”；
如果（this.state.rating>=i/2&&this.state.rating！==null）{
klass=“图标之星”；
}
推(
这是我的手推车（i）}
onClick={（）=>this.rate（i）}
onMouseOut={（）=>this.handleMouseout（）}
/>
);
}
返回{stars}；
}
}
常量道具={
违约评级：2，
最大额定值：5，
handleRate:（…args）=>{
console.log（args）
}
}
ReactDOM.render（，document.querySelector（'.content'））

.rating{
边框：1px纯色灰色
填充物：5px；
}
i[class^='icon-star']{
边框：1px纯黑；
保证金：4倍；
填充物：5px；
高度：10px；
}
.偶像之星{
背景：灰色；
}
.icon-star-o{
背景：黄色；
}

好的

我把计数改为10，把星星倒转过来

下面是更新的

render（）

方法：

  render() {
    const { rating } = this.state;
    let stars = [];
    for (let i = 1; i <= 10; i++) { /* note starting at one UNTIL 10 */
      let klass = "fa fa-star-o";
      if (rating >= i / 2 && rating !== null) {
        klass = "fa fa-star";
      }
      stars.push(
        <i
          style={{
            display: "inline-block",
            width: "8px",
            overflow: "hidden",
            direction: i % 2 ? "ltr" : "rtl" /* reverse the half stars */
          }}
          className={klass}
          key={i}
          onMouseOver={() => this.handleMouseover(i)}
          onClick={() => this.rate(i)}
          onMouseOut={() => this.handleMouseout()}
        />
      );
    }
    return <div className="rating">
    {stars}<br />
    {rating}
    </div>;
  }

render（）{
const{rating}=this.state；
让星星=[]；
for（设i=1；i=i/2&&rating！==null）{
klass=“足球之星”；
}
推(
这是我的手推车（i）}
onClick={（）=>this.rate（i）}
onMouseOut={（）=>this.handleMouseout（）}
/>
);
}
返回
{stars}

{评级}
;
}

您可以添加0。5@milan，我已将您的代码包装在一个片段中。请更新它，以便每个人都可以测试它。@Rajesh snippet什么也不做？@Rajesh Ohhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh@Zze我已经更新了OP的代码。