Как создать компонент автозаполнения в React
Введение
Автозаполнение — это функция, в которой поле ввода предлагает слово на основе ввода пользователя. Это помогает улучшить взаимодействие с пользователем в вашем приложении, например, в случаях, когда необходим поиск.
В этой статье вы узнаете, как создать компонент автозаполнения в React. Вы будете работать с фиксированным списком предложений, привязкой событий, пониманием кодов клавиатуры и управлением состоянием.
Предпосылки
Для выполнения этого урока вам потребуется следующее:
- Требуется понимание React. Чтобы узнать больше о React, ознакомьтесь с серией статей How To Code in React.
Шаг 1 — Создание компонента автозаполнения
Компонент Autocomplete — это место, где вы создадите функциональность функции автозаполнения.
Создайте файл Autocomplete.js, импортируйте React и создайте экземпляр класса Autocomplete:
import React, { Component, Fragment } from "react";
import './styles.css'
class Autocomplete extends Component {
constructor(props) {
super(props);
this.state = {
activeSuggestion: 0,
filteredSuggestions: [],
showSuggestions: false,
userInput: ""
};
}
В вашем состоянии свойство activeSuggestion определяет индекс выбранного предложения. Свойство filteredSuggestions, заданное как пустой массив, соответствует вводу пользователя. Свойство showSuggestions будет определять, будет ли отображаться список предложений, а свойство userInput присваивает себе пустую строку для принятия слова из ввода пользователя.
Запустив класс и установив состояние, давайте рассмотрим методы, применяемые в компоненте.
В файле Autocomplete.js определите метод onChange и обновите состояние:
onChange = e => {
const { suggestions } = this.props;
const userInput = e.currentTarget.value;
const filteredSuggestions = suggestions.filter(
suggestion =>
suggestion.toLowerCase().indexOf(userInput.toLowerCase()) > -1
);
this.setState({
activeSuggestion: 0,
filteredSuggestions,
showSuggestions: true,
userInput: e.currentTarget.value
});
};
Метод onChange сработает, когда пользователь изменит входное значение. При каждом изменении метод будет фильтроваться в списке предложений и возвращать предложения, которые не содержат данных, введенных пользователем. После прохождения фильтра метод .setState() изменит свойство userInput вашего состояния, чтобы оно содержало значение, установите логическое значение showSuggestions, чтобы разрешить предложения для отображения и сбрасывать свойство activeSuggestion при каждом вызове метода.
Событие onClick вызывается, когда пользователь нажимает на предложение. В файле Autocomplete.js объявите метод onClick и реализуйте метод .setState():
onClick = e => {
this.setState({
activeSuggestion: 0,
filteredSuggestions: [],
showSuggestions: false,
userInput: e.currentTarget.innerText
});
};
Метод .setState() обновит ввод пользователя и сбросит свойства вашего состояния.
Метод onKeyDown срабатывает, когда пользователь нажимает клавишу. В файле Autocomplete.js объявите метод onKeyDown и установите несколько условий:
onKeyDown = e => {
const { activeSuggestion, filteredSuggestions } = this.state;
if (e.keyCode === 13) {
this.setState({
activeSuggestion: 0,
showSuggestions: false,
userInput: filteredSuggestions[activeSuggestion]
});
} else if (e.keyCode === 38) {
if (activeSuggestion === 0) {
return;
}
this.setState({ activeSuggestion: activeSuggestion - 1 });
}
// User pressed the down arrow, increment the index
else if (e.keyCode === 40) {
if (activeSuggestion - 1 === filteredSuggestions.length) {
return;
}
this.setState({ activeSuggestion: activeSuggestion + 1 });
}
};
После того как вы сохранили свои свойства activeSuggestion и filteredSuggestion в деконструированном объекте, условные выражения будут проверять, соответствует ли нажатая пользователем клавиша кодам клавиш. Первое условие проверит, соответствует ли код клавиши 13, клавише ввода, и запустит метод .setState() для обновления свойства userInput. и закройте список предложений. Если пользователь нажал стрелку вверх, код клавиши 38, условное выражение уменьшит индекс свойства activeSuggestion и ничего не вернет, если индекс равен нулю. Если пользователь нажал стрелку вниз, код клавиши 40, условное выражение увеличит индекс в свойстве activeSuggestion и ничего не вернет, если индекс соответствует длине filteredSuggestions свойство.
Теперь, когда ваши методы завершены, давайте перейдем к применению вашего метода жизненного цикла render.
В файле Autocomplete.js установите оператор render() и определите свои методы и состояние в деконструированном объекте:
render() {
const {
onChange,
onClick,
onKeyDown,
state: {
activeSuggestion,
filteredSuggestions,
showSuggestions,
userInput
}
} = this;
let suggestionsListComponent;
Переменная suggestionsListComponent не имеет определенного значения, так как вы назначите их в следующих условиях:
if (showSuggestions && userInput) {
if (filteredSuggestions.length) {
suggestionsListComponent = (
<ul class="suggestions">
{filteredSuggestions.map((suggestion, index) => {
let className;
// Flag the active suggestion with a class
if (index === activeSuggestion) {
className = "suggestion-active";
}
return (
<li className={className} key={suggestion} onClick={onClick}>
{suggestion}
</li>
);
})}
</ul>
);
} else {
suggestionsListComponent = (
<div class="no-suggestions">
<em>No suggestions available.</em>
</div>
);
}
}
Первое условие проверяет, существуют ли значения свойств showSuggestions и userInput, а следующее условие проверяет длину свойства filteredSuggestions. . Если условия соблюдены, переменная suggestionsListComponent присваивает себе значение итерации через свойство filteredSuggestions и помечает активное предложение именем класса, если индекс соответствует значению в Свойство activeSuggestion. Переменная suggestionsListComponent вернет упорядоченный список предложений после выполнения метода onClick и присвоит каждому предложению имя класса. Если значения свойств showSuggestions и userInput не существуют, появится текст, указывающий на отсутствие доступных предложений.
Если пользователь не соответствует перечисленным условиям, метод жизненного цикла render() вернет React Fragment, чтобы применить поле ввода и вызвать методы без добавления дополнительных узлов в объектная модель документа:
return (
<Fragment>
<input
type="text"
onChange={onChange}
onKeyDown={onKeyDown}
value={userInput}
/>
{suggestionsListComponent}
</Fragment>
);
}
}
export default Autocomplete;
Теперь, когда вы разработали компонент Autocomplete, экспортируйте файл, объединив его функции в другом компоненте.
Шаг 2 — Присоединение к вашему проекту React
Компонент App — это место, где вы будете отображать функциональные возможности вашего компонента Autocomplete. В файле index.js объявите компонент App и импортируйте компонент Autocomplete:
import React from "react";
import Autocomplete from "./Autocomplete";
function App() {
return (
<div>
<h1>React Autocomplete Demo</h1>
<h2>Start typing and experience the autocomplete wizardry!</h2>
<Autocomplete suggestions={"Oranges", "Apples", "Banana", "Kiwi", "Mango"]}/>
</div>
);
}
export default App
Оператор return в вашем компоненте App принимает компонент Autocomplete с фиксированным списком предложений.
Шаг 3 — Стилизация вашего компонента автозаполнения
Чтобы завершить компонент Autocomplete, добавьте стили с помощью CSS, чтобы расположить и раскрасить приложение и поле ввода.
Создайте файл styles.css и задайте правила CSS для формирования компонента Autocomplete:
body {
font-family: sans-serif;
}
input {
border: 1px solid #999;
padding: 0.5rem;
width: 300px;
}
.no-suggestions {
color: #999;
padding: 0.5rem;
}
.suggestions {
border: 1px solid #999;
border-top-width: 0;
list-style: none;
margin-top: 0;
max-height: 143px;
overflow-y: auto;
padding-left: 0;
width: calc(300px + 1rem);
}
.suggestions li {
padding: 0.5rem;
}
.suggestion-active,
.suggestions li:hover {
background-color: #008f68;
color: #fae042;
cursor: pointer;
font-weight: 700;
}
.suggestions li:not(:last-of-type) {
border-bottom: 1px solid #999;
}
Создав правила CSS, импортируйте файл в файл Autocomplete.js, чтобы применить стили.
Заключение
React предлагает меры по созданию функций автозаполнения, доступных в одном компоненте, со встроенными и настраиваемыми методами для взаимодействия с пользователем.
Узнайте, как работает компонент Autocomplete в CodeSandbox.