react 评价星级

// 这是父组件

   // 先声明个取评价分数的函数   目前只有偶数分（2/4/6/8/10）对应5颗星星

    gradeNum=(num)=>{

console.log(num);

}

// 这是子组件

注 ： 这是一个空心的星星 /static/images/evaluate.png'

这是一个实心的星星  /static/images/evaluateBlock.png';

import React from 'react';

export default class evaluate extends React.Component {

    constructor(props) {

        super(props);

        this.state = {

          evaluateData: {

                 evaluateUrl: '/static/images/evaluate.png'

            }, {

                  evaluateUrl: '/static/images/evaluate.png'

            }, {

              evaluateUrl: '/static/images/evaluate.png'

            }, {

              evaluateUrl: '/static/images/evaluate.png'

            },  {

              evaluateUrl: '/static/images/evaluate.png'

            } ]

        }

    }

// 点击星星是执行的逻辑

    evaluateTabImg=(i)=>{

      let arr = this.state.evaluateData;

      arr.map((val, index) => {

        if (index <= i) {

          val.evaluateUrl = '/static/images/evaluateBlock.png';

        } else {

          val.evaluateUrl = '/static/images/evaluate.png';

        }

      })

      this.setState({

        evaluateData: arr

      })

      let num = (i+1)*2;

// 调用父组件传过来的函数

      this.props.fn(num)

    }

    render(){

        return (

          <div className="evaluateContent">

              <div className="evaluateTit">

                  评价星级

              </div>

              <div className="evaluate">

                  {this.state.evaluateData.map((item, i) => {

                      return <div className="evaluateImg" key={i} onClick={this.evaluateTabImg.bind(this, i)}>

                          <img src={item.evaluateUrl} />

                      </div>

                  })}

              </div>

          </div>

        )

    }

}