ReactJS UI Ant Design Componente Autocompletar

. El componente Autocompletar se usa para Podemos usar el siguiente enfoque en ReactJS para usar el componente Autocompletar de Ant Design.

Métodos de Autocompletar:

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

Accesorios de Autocompletar:

• allowClear: Se utiliza para mostrar el botón borrar.
• autoFocus: Se utiliza para obtener el enfoque cuando se monta el componente.
• backfill: si este valor es verdadero, entonces vuelve a llenar el elemento seleccionado con la entrada cuando se usa el teclado.
• niños (para personalizar el elemento de entrada): se utiliza para personalizar el elemento de entrada.
• children(for dataSource): Se utiliza para que la fuente de datos se complete automáticamente.
• defaultActiveFirstOption: se utiliza para indicar si la primera opción debe estar activa por defecto o no.
• defaultOpen: Se utiliza para indicar el estado inicial de apertura del menú desplegable.
• defaultValue: Se utiliza para indicar la opción seleccionada inicialmente.
• disabled: Se utiliza para deshabilitar la selección.
• dropdownClassName: se utiliza para pasar el nombre de la clase para el estilo del menú desplegable.
• dropdownMatchSelectWidth: se utiliza para determinar si la entrada de selección y el menú desplegable tienen el mismo ancho o no.
• filterOption: se utiliza para aplicar las opciones de filtro en su contra si se establece en verdadero.
• notFoundContent: Se utiliza para mostrar el contenido cuando ningún resultado coincide.
• open: Se utiliza para controlar el estado abierto del menú desplegable.
• opciones: Se utiliza para pasar las opciones de selección.
• marcador de posición: Se utiliza para indicar el marcador de posición de entrada.
• valor: Se utiliza para indicar el valor de la opción seleccionada.
• onBlur: Es una función de devolución de llamada que se activa al salir del componente.
• onChange: es una función de devolución de llamada que se activa al seleccionar una opción o cambiar el valor de entrada.
• onDropdownVisibleChange: es una función de devolución de llamada que se activa cuando el menú desplegable está abierto.
• onFocus: Es una función de devolución de llamada que se activa al ingresar al componente.
• onSearch: es una función de devolución de llamada que se activa al buscar elementos.
• onSelect: es una función de devolución de llamada que se activa al seleccionar una opción.

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 { AutoComplete } from 'antd';
  
export default function App() {
  
  const [currentValue, setCurrentValue] = useState('')
  const options = [
    {label: 'One', value: 'One'}, 
    {label: 'Two', value: 'Two'},
    {label: 'Three', value: 'Three'}, 
    {label: 'Four', value: 'Four'},
    {label: 'Five', value: 'Five'}
  ]
  
  return (
    <div style={{ display: 'block',
                  width: 700, padding: 30 }}>
      <h4>ReactJS Ant-Design AutoComplete Component</h4>
      <AutoComplete
        options={options}
        style={{ width: 200 }}
        onSelect={(value)=> {
            setCurrentValue(value)
        }}
        placeholder="Enter your text"
      /> <br />
  
      <p>Selected Value {`${currentValue}`} </p>
  
    </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/auto-completar/