Componente de selección de diseño de Ant de ReactJS UI

. Select Component se usa paraa Podemos usar el siguiente enfoque en ReactJS para usar Ant Design Select Component.

Seleccionar accesorios:

• allowClear: Se utiliza para indicar si mostrar o no un botón de borrado.
• autoClearSearchValue: Se utiliza para indicar si la búsqueda actual se borrará al seleccionar un elemento o no.
• autoFocus: Se utiliza para obtener el enfoque por defecto.
• bordered: Se utiliza para indicar si tiene estilo de borde o no.
• clearIcon: Se utiliza para el icono claro personalizado.
• defaultActiveFirstOption: Se utiliza para indicar si activa por defecto la primera opción o no.
• defaultOpen: se utiliza para el estado abierto inicial del menú desplegable.
• defaultValue: Se utiliza para denotar la opción seleccionada inicialmente.
• disabled: Se utiliza para indicar si se selecciona deshabilitado o no.
• dropdownClassName: Se utiliza para pasar el className del menú desplegable.
• dropdownMatchSelectWidth: se utiliza para determinar si el menú desplegable y la entrada de selección tienen el mismo ancho o no.
• dropdownRender: Se utiliza para el contenido desplegable personalizado.
• dropdownStyle: Se utiliza para definir el estilo del menú desplegable.
• filterOption: se utiliza para filtrar las opciones por entrada si se establece en verdadero.
• filterSort: Es la función de clasificación para la clasificación de las opciones de búsqueda.
• getPopupContainer: se utiliza para obtener el Node principal en el que se debe representar el selector.
• labelInValue: se utiliza para indicar si se debe incrustar una etiqueta en el valor.
• listHeight: se utiliza para definir la altura de la ventana emergente de configuración.
• loading: Se utiliza para indicar el estado de carga.
• maxTagCount: se utiliza para indicar el número máximo de etiquetas.
• maxTagPlaceholder: se utiliza para indicar el marcador de posición para no mostrar etiquetas.
• maxTagTextLength: se utiliza para indicar la longitud máxima del texto de la etiqueta.
• menuItemSelectedIcon: se utiliza para el icono de menuItemSelected personalizado con múltiples opciones.
• mode: Se utiliza para establecer el modo de selección.
• notFoundContent: se utiliza para especificar el contenido que se mostrará cuando ningún resultado coincida.
• abierto: se utiliza para el estado de apertura controlada del menú desplegable.
• optionFilterProp: se usa para indicar qué valor prop de la opción se usará para un filtro si filterOption se establece en verdadero.
• optionLabelProp: se utiliza para indicar qué valor de propiedad de la opción se representará como el contenido de la selección.
• opciones: se utiliza para indicar las opciones de selección.
• marcador de posición: se utiliza para indicar el marcador de posición de selección.
• removeIcon: se utiliza para indicar el icono de eliminación personalizado.
• searchValue: se utiliza para indicar el texto de búsqueda de entrada actual .
• showArrow: Se utiliza para indicar si mostrar o no la flecha desplegable.
• showSearch: Se utiliza para indicar si mostrar la entrada de búsqueda en un solo modo o no.
• tamaño: se utiliza para indicar el tamaño de la entrada Seleccionar.
• suffixIcon: Se utiliza para el icono de sufijo personalizado.
• tagRender: se utiliza para personalizar el renderizado de etiquetas.
• tokenSeparators: Es el separador que se utiliza para tokenizar en la etiqueta y el modo múltiple.
• valor: Se utiliza para indicar la opción actualmente seleccionada.
• virtual: se utiliza para deshabilitar el desplazamiento virtual cuando se establece en falso.
• onBlur: Es una función llamada que se activa cuando el componente está en un estado de desenfoque.
• onChange: Es una función llamada que se dispara al seleccionar una opción o cambio de valor de entrada.
• onClear: Es una función llamada que se activa cuando la opción está clara.
• onDeselect: Es una función llamada que se activa cuando se deselecciona una opción, param es el valor de la opción seleccionada.
• onDropdownVisibleChange: es una función llamada que se activa cuando se abre el menú desplegable.
• onFocus: es una función llamada que se activa cuando el componente está enfocado.
• onInputKeyDown: Es una función llamada que se dispara cuando se presiona la tecla.
• onMouseEnter: Es una función llamada que se activa cuando el mouse ingresa.
• onMouseLeave: Es una función llamada que se activa cuando el mouse se va.
• onPopupScroll: es una función llamada que se activa cuando se desplaza el menú desplegable.
• onSearch: es una función llamada que se activa cuando se cambia la entrada.
• onSelect: Es una función llamada que se activa cuando se selecciona una opción.

Seleccionar métodos:

• blur(): esta función se utiliza para eliminar el foco.
• focus(): esta función se utiliza para obtener el foco.

Accesorios de opción:

• className: Se utiliza para pasar la clase adicional a la opción.
• disabled: Se utiliza para deshabilitar esta opción.
• título: se utiliza para indicar el título de Seleccionar después de seleccionar esta opción.
• valor: se utiliza para indicar el valor de la opción.

Accesorios de OptGroup:

• clave: Se utiliza para denotar la clave de grupo.
• etiqueta: Se utiliza para denotar la etiqueta del grupo.

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 from 'react'
import "antd/dist/antd.css";
import { Select } from 'antd';
  
const { Option } = Select;
  
export default function App() {
  
  return (
    <div style={{
      display: 'block', width: 700, padding: 30
    }}>
      <h4>ReactJS Ant-Design Select Component</h4>
      <>
        <Select defaultValue="Monday"
          style={{ width: 100 }} >
          <Option value="Monday">Monday</Option>
          <Option value="Tuesday">Tuesday</Option>
          <Option value="Wednesday">Wednesday</Option>
          <Option value="Thursday">Thursday</Option>
          <Option value="Friday">Friday</Option>
          <Option value="Saturday">Saturday</Option>
          <Option value="Sunday">Sunday</Option>
        </Select>
      </>
    </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/select/