Как создать панель поиска в React

Панель поиска - очень распространенный тип ввода на многих веб-сайтах. Это улучшает пользовательский опыт любого веб-приложения. Это достигается за счет сокращения времени, затрачиваемого на поиск данных из очень длинных списков. Некоторым разработчикам может быть сложно добавить панель поиска в одностраничное приложение. Эта статья покажет вам шаг за шагом, как фильтровать длинный список данных с помощью панели поиска в React js.

Шаг 1

Создайте новое приложение React. Назовите это поисковым приложением. Прочтите шаги по установке React здесь

npx create-react-app search-app

Шаг 2

Создайте папку с именем components внутри папки / src вашего проекта приложения. Внутри папки компонентов создайте файл с именем searchBar.js. Импортируйте React и привязку useState к этому файлу.

import React, {useState} from 'react'

Шаг 3

Создайте функциональный компонент под названием searchBar, используя синтаксис ES6.

import React, {useState} from 'react'


const searchBar = () => {}

Шаг 4

Для searchBar создайте переменную с помощью хука useState ().

const [searchInput, setSearchInput] = useState("");

Шаг 5

Теперь создайте постоянный массив стран со свойствами name и continent.

const [searchInput, setSearchInput] = useState("");
const countries = [
  { name: "Belgium", continent: "Europe" },
  { name: "India", continent: "Asia" },
  { name: "Bolivia", continent: "South America" },
  { name: "Ghana", continent: "Africa" },
  { name: "Japan", continent: "Asia" },
  { name: "Canada", continent: "North America" },
  { name: "New Zealand", continent: "Australasia" },
  { name: "Italy", continent: "Europe" },
  { name: "South Africa", continent: "Africa" },
  { name: "China", continent: "Asia" },
  { name: "Paraguay", continent: "South America" },
  { name: "Usa", continent: "North America" },
  { name: "France", continent: "Europe" },
  { name: "Botswana", continent: "Africa" },
  { name: "Spain", continent: "Europe" },
  { name: "Senegal", continent: "Africa" },
  { name: "Brazil", continent: "South America" },
  { name: "Denmark", continent: "Europe" },
  { name: "Mexico", continent: "South America" },
  { name: "Australia", continent: "Australasia" },
  { name: "Tanzania", continent: "Africa" },
  { name: "Bangladesh", continent: "Asia" },
  { name: "Portugal", continent: "Europe" },
  { name: "Pakistan", continent"Asia" },
];

Шаг 6

Создайте функцию-обработчик, которая будет считывать изменения в строке поиска. Затем создайте оператор if, который вернет страны, соответствующие тому, что было введено в строку поиска.

const handleChange = (e) => {
  e.preventDefault();
  setSearchInput(e.target.value);
};
if (searchInput.length > 0) {
    countries.filter((country) => {
    return country.name.match(searchInput);
});
}

Шаг 7

Затем создайте и введите поиск типа внутри оператора возврата searchBar, который пользователь будет вводить.

<input
   type="text"
   placeholder="Search here"
   onChange={handleChange}
   value={searchInput} />

Шаг 8

Наконец, создайте элемент Table, который будет отображать полный список стран. В нем должно быть две колонки. Это столбец имени и столбец континента.

<div>
<input
   type="text"
   placeholder="Search here"
   onChange={handleChange}
   value={searchInput} />
<table>
  <tr>
    <th>Country</th>
    <th>Continent</th>
   
  </tr>
{countries.map((country, index) => {


  <tr>
    <td>{countries.name}</td>
    <td>{countries.continent}</td>
   
  </tr>
})}
</table>
</div>

Окончательный файл searchBar.js должен выглядеть следующим образом.

import React, {useState} from 'react'


const searchBar = () => {
 const [searchInput, setSearchInput] = useState("");
 const countries = [
  { name: "Belgium", continent: "Europe" },
  { name: "India", continent: "Asia" },
  { name: "Bolivia", continent: "South America" },
  { name: "Ghana", continent: "Africa" },
  { name: "Japan", continent: "Asia" },
  { name: "Canada", continent: "North America" },
  { name: "New Zealand", continent: "Australasia" },
  { name: "Italy", continent: "Europe" },
  { name: "South Africa", continent: "Africa" },
  { name: "China", continent: "Asia" },
  { name: "Paraguay", continent: "South America" },
  { name: "Usa", continent: "North America" },
  { name: "France", continent: "Europe" },
  { name: "Botswana", continent: "Africa" },
  { name: "Spain", continent: "Europe" },
  { name: "Senegal", continent: "Africa" },
  { name: "Brazil", continent: "South America" },
  { name: "Denmark", continent: "Europe" },
  { name: "Mexico", continent: "South America" },
  { name: "Australia", continent: "Australasia" },
  { name: "Tanzania", continent: "Africa" },
  { name: "Bangladesh", continent: "Asia" },
  { name: "Portugal", continent: "Europe" },
  { name: "Pakistan", continent"Asia" },
];
const handleChange = (e) => {
  e.preventDefault();
  setSearchInput(e.target.value);
};
if (searchInput.length > 0) {
    countries.filter((country) => {
    return country.name.match(searchInput);
});
}
return <div>
<input
   type="search"
   placeholder="Search here"
   onChange={handleChange}
   value={searchInput} />
<table>
  <tr>
    <th>Country</th>
    <th>Continent</th>  
  </tr>
{countries.map((country, index) => {
<div>
  <tr>
    <td>{country.name}</td>
    <td>{country.continent}</td>
  </tr>
</div>
})}
</table>
</div>

};
export default searchBar;

Шаг 9

Импортируйте компонент searchBar в файл app.js и добавьте его в оператор возврата JSX следующим образом.

import React from 'react'
import './App.css'
import SearchBar from './components/searchBar'
function App() {
  return (
     <div classname='App'>
       <SearchBar/>
     </div>
)}export default App

Запустите приложение.

Заключение

И вот оно. Надеюсь, вы нашли это полезным. Я вернусь с более интересными статьями. Спасибо за чтение.

Больше контента на plainenglish.io