Привет! Вы хотите добавить панель поиска в свое приложение React.js? Что ж, вам повезло! В этой статье мы рассмотрим различные методы реализации панели поиска в React.js, дополненные примерами кода и понятными объяснениями. Итак, давайте приступим и усовершенствуем ваше приложение!

Метод 1: базовая панель поиска
Давайте начнем с простой панели поиска, которая фильтрует данные на основе пользовательского ввода. Вот пример того, как это можно реализовать:

import React, { useState } from 'react';
const SearchBar = () => {
  const [searchText, setSearchText] = useState('');
  const handleSearch = (e) => {
    setSearchText(e.target.value);
  };
  return (
    <div>
      <input type="text" value={searchText} onChange={handleSearch} />
      <button>Search</button>
    </div>
  );
};
export default SearchBar;

Метод 2: обновленная панель поиска
Иногда вам может потребоваться добавить небольшую задержку перед выполнением поиска, чтобы избежать чрезмерных запросов API. Вот пример улучшенной панели поиска с использованием библиотеки lodash:

import React, { useState } from 'react';
import { debounce } from 'lodash';
const SearchBar = () => {
  const [searchText, setSearchText] = useState('');
  const handleSearch = debounce((text) => {
    // Perform search here
    console.log(text);
  }, 500);
  const handleChange = (e) => {
    const text = e.target.value;
    setSearchText(text);
    handleSearch(text);
  };
  return (
    <div>
      <input type="text" value={searchText} onChange={handleChange} />
    </div>
  );
};
export default SearchBar;

Метод 3: панель автозаполнения поиска.
Панель поиска с автозаполнением предлагает предложения по мере ввода пользователем текста. Вот пример использования библиотеки react-autosuggest:

import React, { useState } from 'react';
import Autosuggest from 'react-autosuggest';
const SearchBar = () => {
  const [searchText, setSearchText] = useState('');
  const [suggestions, setSuggestions] = useState([]);
  const handleSearch = (value) => {
    // Perform search here
    console.log(value);
  };
  const handleChange = (event, { newValue }) => {
    setSearchText(newValue);
  };
  const handleSuggestionsFetchRequested = ({ value }) => {
    // Fetch suggestions here based on the value
    // and update the suggestions state
  };
  const handleSuggestionsClearRequested = () => {
    setSuggestions([]);
  };
  const renderSuggestion = (suggestion) => (
    <div>{suggestion}</div>
  );
  const inputProps = {
    value: searchText,
    onChange: handleChange,
  };
  return (
    <Autosuggest
      suggestions={suggestions}
      onSuggestionsFetchRequested={handleSuggestionsFetchRequested}
      onSuggestionsClearRequested={handleSuggestionsClearRequested}
      getSuggestionValue={(suggestion) => suggestion}
      renderSuggestion={renderSuggestion}
      inputProps={inputProps}
    />
  );
};
export default SearchBar;

Метод 4: панель поиска с фильтрами
Добавление фильтров в панель поиска может улучшить взаимодействие с пользователем. Вот пример панели поиска с фильтрами с использованием библиотеки react-select:

import React, { useState } from 'react';
import Select from 'react-select';
const SearchBar = () => {
  const [searchText, setSearchText] = useState('');
  const [selectedFilter, setSelectedFilter] = useState(null);
  const handleSearch = () => {
    // Perform search here with searchText and selectedFilter
    console.log(searchText, selectedFilter);
  };
  const handleFilterChange = (selectedOption) => {
    setSelectedFilter(selectedOption);
  };
  return (
    <div>
      <input type="text" value={searchText} onChange={(e) => setSearchText(e.target.value)} />
      <Select options={filterOptions} value={selectedFilter} onChange={handleFilterChange} />
      <button onClick={handleSearch}>Search</button>
    </div>
  );
};
export default SearchBar;

Вот и все! Мы рассмотрели четыре различных метода реализации панели поиска в React.js, от базовых до сложных примеров. Не стесняйтесь выбирать тот, который лучше всего соответствует требованиям вашего проекта. Приятного кодирования!