- 组件总览
- 通用
- 布局
- 导航
- 数据录入
- 数据展示
- 反馈
- 其他
评分组件。
最简单的用法。
import React from 'react';
import { Rate } from 'antd';
const App: React.FC = () => <Rate />;
export default App;
给评分组件加上文案展示。
import React, { useState } from 'react';
import { Rate } from 'antd';
const desc = ['terrible', 'bad', 'normal', 'good', 'wonderful'];
const App: React.FC = () => {
const [value, setValue] = useState(3);
return (
<span>
<Rate tooltips={desc} onChange={setValue} value={value} />
{value ? <span className="ant-rate-text">{desc[value - 1]}</span> : ''}
</span>
);
};
export default App;
支持允许或者禁用清除。
import React from 'react';
import { Rate } from 'antd';
const App: React.FC = () => (
<>
<Rate defaultValue={3} />
<span className="ant-rate-text">allowClear: true</span>
<br />
<Rate allowClear={false} defaultValue={3} />
<span className="ant-rate-text">allowClear: false</span>
</>
);
export default App;
可以使用 (RateProps) => ReactNode 的方式自定义每一个字符。
import React from 'react';
import { FrownOutlined, MehOutlined, SmileOutlined } from '@ant-design/icons';
import { Rate } from 'antd';
const customIcons: Record<number, React.ReactNode> = {
1: <FrownOutlined />,
2: <FrownOutlined />,
3: <MehOutlined />,
4: <SmileOutlined />,
5: <SmileOutlined />,
};
const App: React.FC = () => (
<>
<Rate defaultValue={2} character={({ index }: { index: number }) => index + 1} />
<br />
<Rate defaultValue={3} character={({ index }: { index: number }) => customIcons[index + 1]} />
</>
);
export default App;
支持选中半星。
import React from 'react';
import { Rate } from 'antd';
const App: React.FC = () => <Rate allowHalf defaultValue={2.5} />;
export default App;
只读，无法进行鼠标交互。
import React from 'react';
import { Rate } from 'antd';
const App: React.FC = () => <Rate disabled defaultValue={2} />;
export default App;
可以将星星替换为其他字符，比如字母，数字，字体图标甚至中文。
import React from 'react';
import { HeartOutlined } from '@ant-design/icons';
import { Rate } from 'antd';
const App: React.FC = () => (
<>
<Rate character={<HeartOutlined />} allowHalf />
<br />
<Rate character="A" allowHalf style={{ fontSize: 36 }} />
<br />
<Rate character="好" allowHalf />
</>
);
export default App;
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| allowClear | 是否允许再次点击后清除 | boolean | true | |
| allowHalf | 是否允许半选 | boolean | false | |
| autoFocus | 自动获取焦点 | boolean | false | |
| character | 自定义字符 | ReactNode | (RateProps) => ReactNode | <StarFilled /> | function(): 4.4.0 |
| className | 自定义样式类名 | string | - | |
| count | star 总数 | number | 5 | |
| defaultValue | 默认值 | number | 0 | |
| disabled | 只读，无法进行交互 | boolean | false | |
| style | 自定义样式对象 | CSSProperties | - | |
| tooltips | 自定义每项的提示信息 | string[] | - | |
| value | 当前数，受控值 | number | - | |
| onBlur | 失去焦点时的回调 | function() | - | |
| onChange | 选择时的回调 | function(value: number) | - | |
| onFocus | 获取焦点时的回调 | function() | - | |
| onHoverChange | 鼠标经过时数值变化的回调 | function(value: number) | - | |
| onKeyDown | 按键回调 | function(event) | - |
| 名称 | 描述 |
|---|---|
| blur() | 移除焦点 |
| focus() | 获取焦点 |