Componente de tasa de diseño de Ant de la interfaz de usuario de ReactJS

. El componente de tasa ayuda a capturar. Podemos usar el siguiente enfoque en ReactJS para usar el componente de tasa de diseño Ant.

Métodos de tarifa:

• blur(): este método se utiliza para eliminar el foco del elemento.
• focus(): este método se utiliza para enfocar el elemento.

Tasa de accesorios:

• allowClear: Se utiliza para especificar si se permite borrar la calificación cuando el usuario vuelve a hacer clic en ella.
• allowHalf: Se utiliza para indicar si se permite o no la semiselección de calificación.
• autoFocus: Se utiliza para obtener el enfoque cuando se monta el componente.
• carácter: se utiliza para indicar el carácter personalizado de la tarifa.
• className: Se utiliza para especificar el nombre de la clase para la tarifa.
• count: se utiliza para indicar el inicio de la cuenta.
• defaultValue: Se utiliza para definir el valor por defecto de la tarifa.
• disabled: Se utiliza para deshabilitar el componente.
• estilo: Se utiliza para especificar el objeto de estilo personalizado para la tarifa.
• información sobre herramientas: se utiliza para personalizar la información sobre herramientas de cada carácter.
• valor: Se utiliza para indicar el valor actual.
• onBlur: es una función de devolución de llamada que se activa cuando el componente pierde el foco.
• onChange: es una función de devolución de llamada que se activa cuando se selecciona un valor.
• onFocus: es una función de devolución de llamada que se activa cuando el componente recibe el foco.
• onHoverChange: es una función de devolución de llamada que se activa cuando se desplaza un elemento.
• onKeyDown: es una función de devolución de llamada que se activa cuando se presiona el componente

Creación de la aplicación React e instalación del módulo:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app foldername

• Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:

  cd foldername

• Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

  npm install antd

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import React, { useState } from 'react'
import "antd/dist/antd.css";
import { Rate } from 'antd';
  
export default function App() {
  
  const [currentValue, setCurrentValue] = useState(2)
  
  return (
    <div style={{ display: 'block', width: 700, padding: 30 }}>
      <h4>ReactJS Ant-Design Rate Component</h4>
      <Rate onChange={(value) => {
        setCurrentValue(value)
      }} value={currentValue} /> <br />
      Current Rating: {currentValue}
    </div>
  );
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Referencia: https://ant.design/components/rate/