# MRate 评分控件

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/mobile/rate/freepass)
- 平台：移动端
- 维护者：赵俊飞
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[MRate]

## 代码演示

### 基础用法

直接引入组件进行使用

```jsx
import React from 'react';
import { MRate, MButton, constantsM } from '@weapp/ui';

export interface RateNodeProps {
  index: number;
}

class RateDemo extends React.Component {

  state = {
    allowHalf: true,
    allowClear: true
  }

  handleChange = (value: number) => {
    console.log('handleChange', value)
  }

  onHoverChange = (value: number | undefined) => {
    console.log('onHoverChange', value)
  }

  onClick = (value: number) => {
    console.log('onClick', value)
  }

  btnClick = (value: string) => {
    return () => {
      value === 'allowHalf' &&
        this.setState({
          allowHalf: !this.state.allowHalf
        });

      value === 'allowClear' &&
        this.setState({
          allowClear: !this.state.allowClear
        });
    }
  }

  render() {
    const { allowHalf, allowClear } = this.state;
    let tooltips = allowHalf ? ['0.5', '1', '1.5', '2', '2.5', '3', '3.5', '4', '4.5', '5'] : ['1', '2', '3', '4', '5']
    return (
      <div className={`${constantsM.uiMClsPrefix}_demo_rate`}>
        <h4 className={'list_title'}>禁用</h4>
        <div className={`list_item`}>
          <MRate
            disabled
            defaultValue={3}
            label={'评分禁用'}
            allowHalf={allowHalf}
            allowClear={allowClear}
          />
        </div>
        <h4 className={'list_title'}>自定义 character</h4>
        <div className={`list_item`}>
          <MRate
            defaultValue={5}
            onChange={this.handleChange}
            onHoverChange={this.onHoverChange}
            autoFocus={true}
            direction={'ltr'}
            allowHalf={allowHalf}
            allowClear={allowClear}
            character={'A'}
            tooltips={tooltips}
            label={'评分'}
          />
        </div>
        <h4 className={'list_title'}>form 表单中使用</h4>
        <div className={`list_item`}>
          <MRate
            isHoldRight
            defaultValue={3}
            label={'form 中使用'}
            allowHalf={allowHalf}
            allowClear={allowClear}
          />
        </div>
        <h4 className={'list_title'}>form 表单中使用（只读）</h4>
        <div className={`list_item`}>
          <MRate
            readOnly
            isHoldRight
            defaultValue={3}
            label={'评分只读'}
            allowHalf={allowHalf}
            allowClear={allowClear}
            onClick={this.onClick}
            onChange={this.handleChange}
            onHoverChange={this.onHoverChange}
          />
        </div>
        <h4 className={'list_title'}>form 表单中使用（禁用）</h4>
        <div className={`list_item`}>
          <MRate
            disabled
            isHoldRight
            defaultValue={3}
            label={'评分禁用'}
            allowHalf={allowHalf}
            allowClear={allowClear}
          />
        </div>
        <h4 className={'list_title'}>控制是否允许半选与删除</h4>
        <MButton onClick={this.btnClick('allowHalf')} >{allowHalf ? '允许半选' : '不允许半选'}</MButton>
        <MButton onClick={this.btnClick('allowClear')} >{allowClear ? '允许点击删除' : '不允许点击删除'}</MButton>
      </div>
    );
  }
}

export default RateDemo;
```

### 受控与非受控

直接引入组件进行使用

```jsx
import React from 'react';
import { MRate, constantsM } from '@weapp/ui';

export interface RateNodeProps {
  index: number;
}

class RateDemo2 extends React.Component {

  state = {
    value: 3
  }

  onClick = (value: number) => {
    console.log('onClick', value);
    this.setState({ value });
  }

  render() {
    const { value } = this.state;
    return (
      <div className={`${constantsM.uiMClsPrefix}_demo_rate`}>
        <h4 className={'list_title'}>非受控</h4>
        <div className={`list_item`}>
          <MRate
            label={'非受控'}
          />
        </div>
        <h4 className={'list_title'}>受控</h4>
        <div className={`list_item`}>
          <MRate
            label={'受控'}
            value={value}
            onClick={this.onClick}
          />
        </div>

      </div>
    );
  }
}

export default RateDemo2;
```

### 只读模式

只读模式

```jsx
import React from 'react';
import { MRate, constantsM } from '@weapp/ui';

export interface RateNodeProps {
  index: number;
}

class RateDemo extends React.Component {

  render() {
    return (
      <div className={`${constantsM.uiMClsPrefix}_demo_rate`}>
        <h4 className={'list_title'}>只读</h4>
        <div className={`list_item`}>
          <MRate
            isHoldRight
            defaultValue={4}
            label={'form 中使用'}
            readOnly
          />
        </div>
        <h4 className={'list_title'}>只读模式不过滤掉未选中的rate</h4>
        <div className={`list_item`}>
          <MRate
            isHoldRight
            defaultValue={4}
            label={'form 中使用'}
            readOnly
            readOnlyFilterEmptyRate={false}
          />
        </div>
        <h4 className={'list_title'}>只读半星</h4>
        <div className={`list_item`}>
          <MRate
            isHoldRight
            defaultValue={4.5}
            readOnly
            allowHalf
            label={'form 中使用'}
          />
        </div>
      </div>
    );
  }
}

export default RateDemo;
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 可选参数 | 默认值 |
| --- | --- | --- | --- | --- |
| value | 当前数(受控值) | number |  |  |
| defaultValue | 当前数(默认值) | number |  |  |
| content | 总数 | number |  |  |
| allowHalf | 是否允许半选 | boolean |  |  |
| allowClear | 是否允许再次点击后清除 | boolean |  |  |
| character | 自定义字符 | React.ReactNode |  |  |
| tooltips | 提示信息 | string[] |  |  |
| direction | 方向 | string | `ltr` \| `rtl` |  |
| label | rate 的 label | string |  |  |
| isHoldRight | 是否 character 靠右 | boolean |  |  |
| onChange | 选择时的回调 | (value: number) => void, |  |  |
| onClick | 点击事件回调 | (value: number) => void, |  |  |
| onBlur | 失去焦点时的回调 | (value: number, e: React.FocusEvent) => void, |  |  |
| onFocus | 获取焦点时的回调 | (value: number, e: React.FocusEvent) => void, |  |  |
| onHoverChange | 鼠标经过时数值变化的回调 | (value: number \| undefined) => void, |  |  |
| onKeyDown | onKeyDown 事件回调 | (value: number, e: React.KeyboardEvent) => void; |  |  |
| onKeyPress | onKeyPress 事件回调 | (value: number, e: React.KeyboardEvent) => void; |  |  |
| onKeyUp | onKeyUp 事件回调 | (value: number, e: React.KeyboardEvent) => void; |  |  |
| readOnlyFilterEmptyRate | 只读模式是否过滤掉未选中的rate | boolean | 否 | true |
