Компонент автозаполнения пользовательского интерфейса ReactJS Ant Design

Опубликовано: 8 Августа, 2022

В Ant Design Library этот компонент уже собран, и его также очень легко интегрировать . Компонент автозаполнения используется для автозаполнения произвольного текстового значения значением опции . Мы можем использовать следующий подход в ReactJS для использования компонента автозаполнения Ant Design.

Методы автозаполнения:

  • blur(): этот метод используется для удаления фокуса с элемента.
  • focus(): этот метод используется для получения фокуса на элементе.

Автозаполнение реквизитов:

  • allowClear: используется для отображения кнопки очистки.
  • autoFocus: используется для получения фокуса при монтировании компонента.
  • backfill: если это значение истинно, то оно заполняет выбранный элемент при вводе при использовании клавиатуры.
  • дочерние элементы (для настройки элемента ввода): используется для настройки элемента ввода.
  • Children(for dataSource): используется для автозаполнения источника данных.
  • defaultActiveFirstOption: используется для обозначения того, должна ли первая опция быть активной по умолчанию или нет.
  • defaultOpen: используется для указания начального открытого состояния раскрывающегося списка.
  • defaultValue: используется для указания изначально выбранного параметра.
  • disabled: используется для отключения выбора.
  • dropdownClassName: используется для передачи имени класса для стиля раскрывающегося меню.
  • dropdownMatchSelectWidth: используется для определения того, имеют ли поле выбора и раскрывающееся меню одинаковую ширину или нет.
  • filterOption: используется для применения к нему параметров фильтра, если для него установлено значение true.
  • notFoundContent: используется для отображения содержимого при отсутствии совпадений.
  • open: используется для управления открытым состоянием раскрывающегося списка.
  • options: используется для передачи выбранных параметров.
  • заполнитель: используется для обозначения заполнителя ввода.
  • значение: используется для обозначения выбранного значения параметра.
  • onBlur: это функция обратного вызова, которая срабатывает при выходе из компонента.
  • onChange: это функция обратного вызова, которая запускается при выборе параметра или изменении входного значения.
  • onDropdownVisibleChange: это функция обратного вызова, которая запускается при открытии раскрывающегося списка.
  • onFocus: это функция обратного вызова, которая срабатывает при входе в компонент.
  • onSearch: это функция обратного вызова, которая срабатывает при поиске элементов.
  • onSelect: это функция обратного вызова, которая срабатывает при выборе опции.

Создание приложения React и установка модуля:

  • Шаг 1: Создайте приложение React с помощью следующей команды:

     npx имя папки create-реагировать-приложение

  • Шаг 2: После создания папки проекта, т. е. имя папки , перейдите к ней с помощью следующей команды:

     cd имя папки

  • Шаг 3: После создания приложения ReactJS установите требуется модуль с помощью следующей команды:

     нпм установить и

Структура проекта: Это будет выглядеть следующим образом.

Пример. Теперь запишите следующий код в файл App.js. Здесь приложение является нашим компонентом по умолчанию, в котором мы написали наш код.

App.js




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>
  );
}

Шаг для запуска приложения: Запустите приложение, используя следующую команду из корневого каталога проекта:
npm start
Вывод: теперь откройте браузер и перейдите по адресу http://localhost:3000/ , вы увидите следующий вывод:
Ссылка: https://ant.design/components/auto-complete/

            

                            

                    
                                    

                        

                
РЕКОМЕНДУЕМЫЕ СТАТЬИ