React Build Búsqueda personalizada / Tutorial del componente de filtro de lista

El filtro de búsqueda amplifica la experiencia del usuario; ayuda a los visitantes del sitio a refinar la búsqueda con una palabra clave en particular. Ya sea la página del producto, contenido de video o cualquier otra información importante. Con el componente de filtro de búsqueda, siempre tiene la opción de limitar los resultados de su búsqueda.

En este tutorial, descubrirá cómo crear una funcionalidad de filtro de búsqueda en el componente de clase de React. También demostraremos cómo usar Axios con una API pública gratuita para obtener los datos en el componente de filtro de búsqueda de React.

Para desarrollar el filtro de búsqueda de lista en React, también utilizará el marco CSS de Bootstrap. Con la ayuda de esta profunda biblioteca de diseño de interfaz de usuario, crearemos la barra de lista de filtros sutiles.

Los métodos de ciclo de vida de React son útiles cuando se trata de administrar el ciclo de vida del componente de clase. Esta publicación hará todo lo posible para mostrar cómo usar el montaje y desmontaje para el módulo de búsqueda de filtros.

Cómo crear un filtro de lista de búsqueda en React con API pública

• Paso 1: Crear aplicación de reacción
• Etapa 4: Configurar Bootstrap en React
• Paso 3: Crear archivo de filtro de búsqueda de React
• Paso 5: Registrar filtro de búsqueda en React
• Paso 6: Inicie el servidor React

Crear aplicación de reacción

Estamos seguros de que ya hemos configurado un proyecto React. Sin embargo, si no, continúe y use el comando dado para comenzar el proceso de descarga de la aplicación.

npx create-react-app react-world

Ahora, ingrese directamente a la carpeta de la aplicación.

cd react-world

Configurar Bootstrap en React

Posteriormente, escriba el siguiente comando y comience la instalación del paquete de arranque en React.

npm install bootstrap

Dirigirse a Aplicación.js archivo, en este archivo debe establecer la ruta CSS de arranque.

import 'bootstrap/dist/css/bootstrap.min.css'

Crear archivo de filtro de búsqueda de React

Ahora, construiremos un componente separado en nuestra aplicación React. Da un paso, y ponlo en componentes/ directorio, después de entrar en la carpeta, cree FilterSearch.js Archivo.

Luego, coloque el código dado en el FilterSearch.js Archivo.

import React, { Component } from 'react'
import axios from 'axios'
class DynamicSearch extends Component {
  constructor(props) {
    super(props)
    this.state = {
      Student: [],
    }
    this.node = React.createRef()
  }
  componentDidMount() {
    document.addEventListener('mousedown', this.onSearchClick)
  }
  componentWillUnmount() {
    document.removeEventListener('mousedown', this.onSearchClick)
  }
  onSearchClick = (e) => {
    if (this.node.current.contains(e.target)) {
      return
    }
    this.setState({
      Student: [],
    })
  }
  handleAPI = async (e) => {
    await axios
      .get('https://jsonplaceholder.typicode.com/users')
      .then((res) => {
        this.setState({
          Student: res.data,
        })
      })
      .catch((err) => {
        alert(err)
      })
    let convertToLc = e.target.value.toLowerCase()
    let filterData = this.state.Student.filter((e) => {
      let nameToLc = e.name.toLowerCase()
      return nameToLc.indexOf(convertToLc) !== -1
    })
    this.setState({
      Student: filterData,
    })
  }
  render() {
    return (
      <div className="container mt-5">
        <h2>React Filter Search Module Example</h2>
        <div className="mt-4">
          <input
            type="text"
            onClick={this.onSearchClick}
            className="form-control"
            onChange={this.handleAPI}
            placeholder="Search ..."
            ref={this.node}
          />
        </div>
        <ul className="list-group">
          {this.state.Student.map((res) => {
            return (
              <a
                href="#"
                className="list-group-item list-group-item-action"
                key={res.id}
              >
                {res.name}
              </a>
            )
          })}
        </ul>
      </div>
    )
  }
}
export default DynamicSearch;

Registrar filtro de búsqueda en React

Ahora, todo el trabajo principal está hecho, luego abra el Aplicación.js Archivo. Aquí, dentro de este archivo, debe importar el componente donde escribió el código de búsqueda del filtro.

import React from 'react'
import DynamicSearch from './components/DynamicSearch'
import 'bootstrap/dist/css/bootstrap.min.css';

export default function App() {
  return (
    <div className="App">
      <DynamicSearch />
    </div>
  )
}

Inicie el servidor React

Finalmente hemos llegado al último paso y vamos a iniciar el servidor de reacción.

Ejecute el comando dado desde la terminal.

npm start

Puede probar la búsqueda del filtro a través de la URL dada.

http://localhost:3000

Conclusión

Hemos creado la búsqueda de filtro de reacción; sin embargo, discutimos varios temas como el uso de Axios para realizar una solicitud HTTP, métodos de ciclo de vida para manejar datos provenientes de una API y eventos de reacción.

Al final de este artículo, creamos con éxito un filtro de búsqueda dinámico que nos ayuda a refinar los resultados de búsqueda en función de una palabra clave específica.