DevWebPHP
Image
16/09/2019

Formulário de pesquisa simples no React usando hooks.

# Formulário de pesquisa simples no React usando hooks.

A pesquisa é um dos componentes mais importantes em um aplicativo web. Vamos dar um exemplo de uma plataforma de e-commerce em que existem milhares de itens à venda, mas para encontrar o item específico que você está procurando, é necessário pesquisar pelo item usando o componente de pesquisa fornecido pela plataforma.

Hoje vamos aprender a criar um formulário de pesquisa simples, que pesquisa em uma lista de dados usando React.

# Configurando o Projeto

Para configurar seu projeto, você pode usar um create-react-app ou você pode fazer na CodeSandBox.

Depois de criar o projeto, primeiro vamos criar uma interface do usuário simples que tenha um campo de entrada e exiba a lista de resultados da pesquisa.

Vá para o arquivo index.js que está na raiz do seu projeto, limpe todo o código interno e adicione o seguinte código:

import React from "react";
import ReactDOM from "react-dom";

function App() {
  return (
    <div className="App">
      <input
        type="text"
        placeholder="Search"
      />
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
    </div>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

No componente acima, criamos um formulário de entrada simples (que atualmente não faz nada) e uma lista simulada dos resultados que serão exibidos.

Agora aplicamos o two-way data binding no campo de entrada, que basicamente pega o valor do usuário e o salva no estado.

import React from "react";
import ReactDOM from "react-dom";

function App() {
 const [searchTerm, setSearchTerm] = React.useState("");
  const handleChange = event => {
    setSearchTerm(event.target.value);
  };
  return (
    <div className="App">
      <input
        type="text"
        placeholder="Search"
        value={searchTerm}
        onChange={handleChange}
      />
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
    </div>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

Agora criamos um estado chamado searchTerm que salva os dados da entrada de pesquisa em todas as ocorrências do evento change. O método handleChange toma o objeto event como argumento e define o valor atual do formulário para o estado searchTerm usando o método setSearchTerm fornecido pelo método React.useState.

Agora, criamos uma lista simulada de dados e pesquisamos os dados com base na entrada fornecida pelo usuário na caixa de entrada que criamos.

import React from "react";
import ReactDOM from "react-dom";

const people = [
  "Siri",
  "Alexa",
  "Google",
  "Facebook",
  "Twitter",
  "Linkedin",
  "Sinkedin"
];

function App() {
 const [searchTerm, setSearchTerm] = React.useState("");
 const [searchResults, setSearchResults] = React.useState([]);
 const handleChange = event => {
    setSearchTerm(event.target.value);
  };

  return (
    <div className="App">
      <input
        type="text"
        placeholder="Search"
        value={searchTerm}
        onChange={handleChange}
      />
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
    </div>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

No código acima, criamos uma lista/matriz simulada denominada people, a partir da qual exibiremos a lista em nosso componente. Também criamos um estado chamado searchResults que é usado para definir o resultado da pesquisa.

Agora aplicamos a funcionalidade de pesquisa ao nosso componente.

import React from "react";
import ReactDOM from "react-dom";

const people = [
  "Siri",
  "Alexa",
  "Google",
  "Facebook",
  "Twitter",
  "Linkedin",
  "Sinkedin"
];

function App() {
 const [searchTerm, setSearchTerm] = React.useState("");
 const [searchResults, setSearchResults] = React.useState([]);
 const handleChange = event => {
    setSearchTerm(event.target.value);
  };
 React.useEffect(() => {
    const results = people.filter(person =>
      person.toLowerCase().includes(searchTerm)
    );
    setSearchResults(results);
  }, [searchTerm]);

  return (
    <div className="App">
      <input
        type="text"
        placeholder="Search"
        value={searchTerm}
        onChange={handleChange}
      />
      <ul>
         {searchResults.map(item => (
          <li>{item}</li>
        ))}
      </ul>
    </div>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

Agora, no código acima, o hook React.useEffect é executado sempre que a dependência do método é alterada. O hook React.useEffect recebe dois argumentos. O primeiro argumento é a função a ser executada quando os dados na dependência são modificados e o segundo é uma matriz de dependências das quais o hook React.useEffect depende. Portanto, sempre que o valor das dependências no hook React.useEffect for alterado, a função em seu primeiro argumento será executada.

Portanto, no hook React.useEffect acima, a dependência é searchTerm que é alterada toda vez que o usuário digita, que por sua vez executa a função no primeiro argumento do hook React.useEffect. A seguinte função é executada:

() => {
  const results = people.filter(person =>
    person.toLowerCase().includes(searchTerm.toLowerCase())
  );
  setSearchResults(results);
}
1
2
3
4
5
6

Na função acima, o método filter é aplicado à matriz people que retorna uma nova matriz de acordo com a condição retornada em cada iteração. A condição é person.toLowerCase().includes(searchTerm.toLowerCase()) que significa que se o valor de person na lista das pessoas contém(includes) o valor de searchTerm, em seguida, retornar true caso contrário retorna false.

Depois que a lista filtrada é definida no estado searchResults usando o setSearchResult fornecido pelo hook `React.useState.

Agora, definimos os resultados da pesquisa para o estado, exibimos usando o método searchResults.map em nosso componente que itera sobre todos os searchResults e os renderiza dentro do ul.

<ul>
  {searchResults.map(item => (
    <li>{item}</li>
  ))}
</ul>
1
2
3
4
5

O resultado final é mais ou menos assim: Resultado

Traduzido do artigo original: https://dev.to/asimdahall/simple-search-form-in-react-using-hooks-42pg

Copyright © DevWebPHP 2020