# rate 评分

## 使用场景

* 展示星级评价。

* 采用星级展示进度。

## 案例演示

### Rate 基本使用

---demo
```js
import { Rate, StdForm } from 'amos-framework';

ReactDOM.render(
  <div style={{ width: '20em', display: 'inline-block' }}>
    <StdForm label="基本使用"><Rate /></StdForm>
    <StdForm label="指定值"><Rate value={3} /></StdForm>
    <StdForm label="指定值"><Rate value={3.5} /></StdForm>
    <StdForm label="禁用"><Rate disabled /></StdForm>
    <StdForm label="自定义颜色"><Rate color="red" /></StdForm>
    <StdForm label="允许半选"><Rate color="red" allowHalf /></StdForm>
    <StdForm label="允许清除"><Rate color="blue" allowClear /></StdForm>
  </div>
  , _react_runner_);
```
---demoend

### Rate 事件

---demo
```js
import { Rate, StdForm } from 'amos-framework';


class Demo extends Component {

  state = {
    value: 2,
    hoverValue: 0
  };

  onChange = (e, value) => {
    this.setState({
      value
    });
  }

  onHoverChange = (e, value) => {
    this.setState({
      hoverValue: value
    });
  }

  render() {
    const { value, hoverValue } = this.state;
    return (
      <div style={{ width: '20em', display: 'inline-block' }}>
        <StdForm label="change"><Rate value={value} onChange={this.onChange} /></StdForm>
        <StdForm label="hover"><Rate value={value} onHoverChange={this.onHoverChange} onChange={this.onChange} /></StdForm>
        <div>评分结果:{value}</div>
        <div>当前鼠标所指评分:{hoverValue}</div>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### Rate 自定义字符

---demo
```js
import { Rate, StdForm, Icon } from 'amos-framework';

ReactDOM.render(
  <div style={{ width: '20em', display: 'inline-block' }}>
    <StdForm label="自定义字符"><Rate character="❤" color="red" /></StdForm>
    <StdForm label="自定义字符"><Rate character="星" /></StdForm>
    <StdForm label="组件"><Rate character={<Icon icon="user" />} /></StdForm>
  </div>
  , _react_runner_);
```
---demoend

### Rate 展现结果

---demo
```js
import { Rate, StdForm } from 'amos-framework';

class Demo extends Component {

  state = {
    value: 2,
    hoverValue: 0
  };

  onChange = (e, value) => {
    this.setState({
      value
    });
  }

  onHoverChange = (e, value) => {
    this.setState({
      hoverValue: value
    });
  }

  transResult = () => {
    const { value, hoverValue } = this.state;
    const mapping = ['未知', '极差', '较差', '合格', '良好', '优秀'];
    const _value = hoverValue > 0 ? hoverValue : value;
    return mapping[_value];
  }

  render() {
    const { value, hoverValue } = this.state;
    return (
      <div style={{ width: '20em', display: 'inline-block' }}>
        <Rate onChange={this.onChange} value={value} onHoverChange={this.onHoverChange} />
        {value > -1 && <span> {this.transResult()} </span>}
        {hoverValue > -1 && <span>, hover： {hoverValue} stars</span>}
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

## props

| params | type | default | description |
|--------- |-------- |--------- |-------- |
| prefixCls | string | - | 组件样式前缀 |
| className | string | - | 组件外层容器样式名 |
| value | number | 0 | rate值，判断是否选中 |
| count | Number | 5 | star 总数 |
| character | string or React.Element | `★` | 显示字符 |
| disabled | Boolean | `false` | 是否禁用选择 |
| allowHalf | Boolean | `false` | 是否允许半选 |
| onChange | `func: (e, value) => {}` | `() => {}` | 改变rate 值的回调 |
| onHoverChange | `func: (e, value) => {}` | `() => {}` | 鼠标hover时，rate值变化的回调 |

> 注意，当设置 onChange时，需要设置value; 当设置onHoverChange时，既要设置onChange还需要设置value