赵走x博客 - 开发者的网上家园

37、构建实例应用：表单：Rating组件

资源编号:76090 书籍 React快速上手开发热度：81

这个应用是用于对已品尝酒类记录笔记的。最偷懒的一种记录方法就是进行星级评分，比如从一星到五星。

通过一些可配置的选项，可以让这个星级评分组件变为高度可重用。

*  显示的星级数量可以为任意数值。默认值是5，但是也可以变为其他数值，比如11。
* 只读属性。有些时候你不愿让重要的评分数据因为用户误点击而丢失。

首先在发现工具中编写测试（如图6-5 所示）：
```
<h2>Rating</h2>
<div>No initial value: <Rating /></div>
<div>Initial value 4: <Rating defaultValue={4} /></div>
<div>This one goes to 11: <Rating max={11} /></div>
<div>Read-only: <Rating readonly={true} defaultValue={3} /></div>
```

![bs64](https://img.handsomemark.com/2019/11/15/5c376696-0763-11ea-8a5c-0242ac140002.png)
图6-5：星级评分组件
在编写具体逻辑之前，需要设置属性类型，并列出需要维护的状态：
```
import classNames from 'classnames'
import React,{Component} from 'react'
// 从 React v15.5 开始 ，React.PropTypes 助手函数已被弃用，我们建议使用 prop-types 库 来定义contextTypes。
import PropTypes from 'prop-types'

class Rating extends Component{
    constructor(props){
        super(props);
        this.state={
            rating:props.defaultValue,
            tmpRating:props.defaultValue
        }
    }
    /* 更多方法 */
}

Rating.propTypes={
    defaultValue:PropTypes.number,
    readonly:PropTypes.bool,
    max:PropTypes.number
};

Rating.defaultProps={
    defaultValue:0,
    max:5
};

export default Rating
```
这些属性的作用一目了然：max 代表星星的数量，readonly 决定组件是否只读。在state中，rating 属性对应当前的评分，tmpRating 则对应用户把鼠标放在星星上移动但尚未点击提交时显示的评分。

接下来编写一些辅助函数，帮助我们处理用户与组件进行交互时发生的状态变化：
```
getValue(){
        //我们的所有输入组件提供了这个函数
        return this.state.rating;
    }
    
    setTemp(rating){
        //用户把鼠标方在组件上时，调用该方法
        this.setState({tmpRating:rating})
    }
    setRating(rating){
        //用户点进组件时，调用该方法
        this.setState({
            tmpRating:rating,
            rating:rating
        });
    }
    reset(){
        //用户把鼠标移开时，调用该方法
        this.setTemp(this.state.rating);
    }
    componentWillReceiveProps(nextProps, nextContext) {
        //响应组件外部的变化
        this.setRating(nextProps.defaultValue);
    }
```
最后实现render() 方法，其逻辑包括以下两点。
*  渲染星星的循环，循环次数从1 开始，到this.props.max 结束。星星可以用符号☆ 表示。当星星包含类名RatingOn 时，颜色变为黄色。
*  一个隐藏的`<input> `表单域，可以像真正的表单输入框那样使评分的值通过常用的方法取值（和任何普通的`<input>` 标签一样）：
```
render() {
        const stars=[];
        for(let i=1;i<this.props.max;i++){
            stars.push(
                <span className={i<=this.state.tmpRating?'RatingOn':null}
                      key={i}
                      onClick={!this.props.readonly? this.setRating.bind(this,i):undefined}
                      onMouseOver={!this.props.readonly ? this.setTemp.bind(this,i):undefined}
                >
                    ☆
                </span>
            );
        }
        return (
            <div className={classNames({"Rating":true,"RatingReadonly":this.props.readonly})}
                 onMouseOut={this.reset.bind(this)}
            >
                {stars}
                {this.props.readonly || !this.props.id?null:
                    <input type="hidden" id={this.props.id} value={this.state.rating}/>
                }
            </div>
        )
    }
```
在这里有一个地方需要注意，那就是bind 方法的使用。在渲染星星的循环中，绑定当前循环中i 的值很合理，但为什么要使用this.reset.bind(this) 呢？事实上，这是在使用ESclass 语法时完成绑定的一种方式。一共有三种方法可以完成绑定：
*  使用this.method.bind(this)，正如你在上述例子中所看到的那样；
*  使用箭头函数会自动进行绑定，比如(_unused_event_) => this.method()；
*  在构造函数中一次性绑定。
关于第三种方法，具体做法如下：
```
class Comp extents Component {
	constructor(props) {
			this.method = this.method.bind(this);
	}
	render() {
			return <button onClick={this.method}>
	}
}
```
这种做法的一个优点是，你可以像以前（使用React.createClass({}) 时）一样，直接使用this.method 的引用。另一个优点是只需绑定一次即可，不需要在每次调用render() 方法时都绑定。它的不足之处在于会在控制器中增添更多的模板代码。