ReactJS UI Ant Design Rate 组件

Ant Design 是一套企业级的 UI 设计语言和 React 实现库，提供了许多方便易用、美观大方的 UI 组件。其中的 Rate 组件，可以用于评分场景。

安装

使用 npm 安装：

npm install antd

使用

在代码中引入 Rate：

import React from 'react';
import { Rate } from 'antd';

function App() {
  return (
    <div>
      <Rate />
    </div>
  );
}

export default App;

API

Rate props

| 参数 | 说明 | 类型 | 默认值 | | ---------- | -------------------------------------- | ---------------- | -------- | | allowHalf | 是否允许半选 | boolean | false | | allowClear | 是否允许再次点击后清除 | boolean | true | | autoFocus | 自动获取焦点 | boolean | false | | character | 自定义字符 | ReactNode | - | | count | 星星总数 | number | 5 | | defaultValue | 默认星级，可以为小数 | number | 0 | | disabled | 只读，无法进行交互 | boolean | false | | onChange | 选择时的回调函数 | Function(value: number) | - | | onHoverChange | 鼠标经过时的回调函数 | Function(value: number) | - | | value | 星级数，可以为小数 | number | - |

Rate Methods

| 名称 | 说明 | 参数 | | -------- | ------------ | ---- | | blur() | 取消焦点 | 无 | | focus() | 获取焦点 | 无 | | getValue() | 获取当前数量 | 无 | | setValue(value: number) | 设置数值 | value: number |

示例

基本使用

import React, { useState } from 'react';
import { Rate } from 'antd';
  
function BasicUsage() {
  const [value, setValue] = useState(0);
  const handleChange = (value) => {
    setValue(value);
  }
  
  return (
    <Rate value={value} onChange={handleChange} />
  );
}

export default BasicUsage;

自定义字符

import React, { useState } from 'react';
import { Rate } from 'antd';
  
function CustomCharacter() {
  const [value, setValue] = useState(0);
  const handleChange = (value) => {
    setValue(value);
  };
  const customCharacter = (
    <span role="img" aria-label="star">
      🌟
    </span>
  );
  
  return (
    <Rate character={customCharacter} value={value} onChange={handleChange} />
  );
}

export default CustomCharacter;

允许半选

import React, { useState } from 'react';
import { Rate } from 'antd';
  
function AllowHalf() {
  const [value, setValue] = useState(0);
  const handleChange = (value) => {
    setValue(value);
  };
  
  return (
    <Rate allowHalf={true} value={value} onChange={handleChange} />
  );
}

export default AllowHalf;

只读模式

import React from 'react';
import { Rate } from 'antd';

function ReadOnly() {
  return (
    <Rate value={3.5} disabled={true} />
  );
}

export default ReadOnly;

其他 API

import React, { useState, useRef } from 'react';
import { Rate, Button } from 'antd';

function OtherAPI() {
  const [value, setValue] = useState(0);
  const rateRef = useRef(null);
  const handleChange = (value) => {
    setValue(value);
  };
  const handleFocus = () => {
    rateRef.current.focus();
  };
  const handleBlur = () => {
    rateRef.current.blur();
  };
  const handleGetValue = () => {
    console.log(rateRef.current.getValue());
  };
  const handleSetValue = () => {
    rateRef.current.setValue(1.5);
  };
  
  return (
    <div>
      <Rate ref={rateRef} value={value} onChange={handleChange} />
      <Button onClick={handleFocus}>获取焦点</Button>
      <Button onClick={handleBlur}>取消焦点</Button>
      <Button onClick={handleGetValue}>获取当前数量</Button>
      <Button onClick={handleSetValue}>设置数值</Button>
    </div>
  );
}

export default OtherAPI;

以上就是针对 Rate 组件的介绍，更多的 API 细节可以参考 Ant Design 官方文档。使用 Rate 组件可以方便地实现评分场景，提升用户体验。