As barras de pesquisa são uma ótima maneira de ajudar os usuários a encontrar o que precisam em seu site. Eles também são bons para análises se você acompanhar o que seus visitantes estão procurando.
Você pode usar o React para criar uma barra de pesquisa que filtre e exiba dados à medida que o usuário digita. Com os ganchos do React e os métodos JavaScript map e filter array, o resultado final é uma caixa de pesquisa responsiva e funcional.
Criando a barra de pesquisa
A pesquisa receberá informações de um usuário e acionará a função de filtragem. Você pode use uma biblioteca como Formik para criar formulários em React, mas você também pode criar uma barra de pesquisa do zero.
Se você não tem um projeto React e deseja acompanhar, crie um usando o comando create-react-app.
npx criar-react-app procurar-bar
No App.js arquivo, adicione o elemento de formulário, incluindo a tag de entrada:
exportarpadrãofunçãoAplicativo() {
retornar (
<div>
<forma>
<tipo de entrada ="procurar"/>
</form>
</div>
)
}
Você deve usar o
useStateGancho de reação e a em mudança evento para controlar a entrada. Portanto, importe useState e modifique a entrada para usar o valor do estado:importar { useState } de "Reagir"
exportarpadrãofunçãoAplicativo() {
const [consulta, setconsulta] = useState('')
const handleChange = (e) => {
setquery(e.alvo.valor)
}
retornar (
<div>
<forma>
<tipo de entrada ="procurar" value={consulta} onChange={handleChange}/>
</form>
</div>
)
}
Toda vez que um usuário digita algo dentro do elemento de entrada, lidar com mudança atualiza o estado.
Filtrando os dados na alteração de entrada
A barra de pesquisa deve acionar uma pesquisa usando a consulta fornecida pelo usuário. Isso significa que você deve filtrar os dados dentro da função handleChange. Você também deve acompanhar os dados filtrados no estado.
Primeiro, modifique o estado para incluir os dados:
const [estado, setstate] = useState({
consulta: '',
lista: []
})
Agrupar os valores de estado dessa forma, em vez de criar um para cada valor, reduz o número de renderizações, melhorando o desempenho.
Os dados filtrados podem ser qualquer coisa sobre a qual você deseja realizar uma pesquisa. Por exemplo, você pode criar uma lista de exemplos de postagens de blog como esta:
const mensagens = [
{
url: '',
Tag: ['reagir', 'blogue'],
título: 'Como criar uma reação procurar bar',
},
{
url:'',
Tag: ['nó','expressar'],
título: 'Como zombar de dados de API no Node',
},
// mais dados aqui
]
Você também pode buscar os dados usando uma API de um CDN ou banco de dados.
Em seguida, modifique a função handleChange() para filtrar os dados sempre que o usuário digitar dentro da entrada.
const handleChange = (e) => {
const resultados = posts.filter (post => {
if (e.target.value "") retornar postagens
retornarpublicar.título.toLowerCase().inclui(e.alvo.valor.toLowerCase())
})
definir estado({
consulta: e.alvo.valor,
lista: resultados
})
}
A função retorna as postagens sem pesquisá-las se a consulta estiver vazia. Se um usuário digitou uma consulta, ele verifica se o título da postagem inclui o texto da consulta. A conversão do título da postagem e da consulta para letras minúsculas garante que a comparação não diferencie maiúsculas de minúsculas.
Depois que o método de filtro retorna os resultados, a função handleChange atualiza o estado com o texto da consulta e os dados filtrados.
Exibindo os resultados da pesquisa
A exibição dos resultados da pesquisa envolve um loop na matriz da lista usando o mapa método e exibindo os dados para cada item.
exportarpadrãofunçãoAplicativo() {
// estado e função handleChange()
retornar (
<div>
<forma>
<input onChange={handleChange} value={state.query} type="procurar"/>
</form>
<ul>
{(estado.consulta ''? "": state.list.map (postagem => {
retornar <li key={post.title}>{post.title}</li>
}))}
</ul>
</div>
)
}
Dentro da tag ul, o componente verifica se a consulta está vazia. Se for, exibe uma string vazia porque significa que o usuário não pesquisou nada. Se você deseja pesquisar em uma lista de itens que já está exibindo, remova esta verificação.
Se a consulta não estiver vazia, o método map repetirá os resultados da pesquisa e listará os títulos das postagens.
Você também pode adicionar uma marca que exibe uma mensagem útil se a pesquisa não retornar resultados.
<ul>
{(estado.consulta ''? "Nenhuma postagem corresponde à consulta": !estado.lista.comprimento? "Sua consulta não retornou nenhum resultado": state.list.map (postagem => {
retornar <li key={post.title}>{post.title}</li>
}))}
</ul>
Adicionar esta mensagem melhora a experiência do usuário porque o usuário não fica olhando para um espaço em branco.
Manipulando mais de uma vez o parâmetro de pesquisa
Você pode usar o estado React e ganchos, juntamente com eventos JavaScript, para criar um elemento de pesquisa personalizado que filtra uma matriz de dados.
A função de filtro verifica apenas se a consulta corresponde a uma propriedade — título — nos objetos dentro da matriz. Você pode melhorar a funcionalidade de pesquisa usando o operador OR lógico para corresponder a consulta a outras propriedades no objeto.
