// 这是父组件
// 先声明个取评价分数的函数 目前只有偶数分（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>
)
}
}
