// 這是父組件
? ?// 先聲明個取評價分?jǐn)?shù)的函數(shù)? ?目前只有偶數(shù)分（2/4/6/8/10）對應(yīng)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'
? ? ? ? ? ? } ]
? ? ? ? }
? ? }
// 點擊星星是執(zhí)行的邏輯
? ? 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;
// 調(diào)用父組件傳過來的函數(shù)
? ? ? 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>
? ? ? ? )
? ? }
}
