react星星评分

React星星评分

大家好，本文介绍使用react制作星星评分，有关react的相关知识这里就不作介绍了。下面就让我们从头开始构建评分系统吧！

1、构造一个新的react

export default class StarMarking extends React.Component {
   
    constructor(props) {
   
        super(props);
    }
    render() {
   
        return (
            <div className="starmarkingentry">
            </div>
        )
    }
}

2、设定state参数

这里需要设定一个hover参数控制鼠标移动到星星上后左右的改变，另外还需要一个click参数记录鼠标点击后的结果

this.state = {
   
            clickIndex: 0,
            hoverIndex: 0,
        }

3、设定渲染格式

react通过render进行渲染，本文中通过getStar方法得到星星元素，另外从上一级中得到name值（当然可以在这个react组件中直接设定，不过这样可以方便模块化）

    render() {
   
        let starItems = this.getStar();
        return (
            <div className="starmarking">
                <div className="functionname">{
   this.props.data}</div>
                <div className="starcontainer">
                    {
   starItems}
                </div>
            </div>
        )
    }

4、星星元素

react中改变state的值就可以重新渲染，通过hover和click的值我们可以得到当前需要显示实心还是空心星星，然后通过监听鼠标事件onClick，onMouseEnter，onMouseOut来改变state值从而重新渲染得到新的星星排布。本文中onClick事件会向上一级传递分数信息。

        getStar() {
   
        let num = this.state.hoverIndex === 0 ? this.state.clickIndex : this.state.hoverIndex;
        let starContainer