Crear Una Barra De Búsqueda En Cero Reaccionar

Una barra de búsqueda ayuda a filtrar lo que se requiere y encontrar el resultado deseado por el usuario.

Usted puede estar pensando, hay varios reaccionan bibliotecas que pueden ayudar a configurar un componente de búsqueda en cuestión de segundos, ¿por qué perder el tiempo escribiendo una gran cantidad de líneas para crear algo que ya existe?

o tal vez usted se está preguntando por qué no es siempre la mejor idea de utilizar una biblioteca para implementar una barra de búsqueda en su proyecto. Aquí hay algunas ideas al respecto.

A continuación se muestra un informe detallado de un paquete popular en la NGP.

Fuente: bundlephobia

Incluso si tenemos en cuenta la versión reducida de la biblioteca, es demasiado grande como para incluir en un proyecto. Nuestro código de abajo tiene alrededor de 746 bytes, que es mucho menor que cualquier biblioteca por ahí!

Otra de las ventajas de crear una barra de búsqueda cero es que es mucho más personalizable que las bibliotecas. No importa cuántas bibliotecas se utiliza en un proyecto de gestión de proyectos, el estado, los conceptos básicos sigue siendo muy importante para un desarrollador de saber.

En este tutorial, vamos a tratar de replicar una barra de búsqueda que las pistas introduzca ninguna modificación en el campo de entrada y filtra los datos presentes en el sitio. Más concretamente, vamos a construir una barra de búsqueda que filtra las entradas del blog para sus títulos.

Esto es lo que vamos a cubrir en este artículo:

La configuración de los archivos iniciales que generan datos ficticios para la barra de búsqueda Viendo los datos ficticios de la barra de búsqueda Crear el funcional barra de búsqueda

Configuración de los archivos iniciales

Vaya por delante e iniciar un nuevo proyecto REACT por el uso de crear Reaccionar aplicación.

npx crear una reacción aplicación de búsqueda de la barra tutorial

Ir al archivo raíz y eliminar todos los archivos innecesarios.

Abrir el archivo app.js y limpie los elementos densos JSX.

Ahora, crear un campo de entrada para el usuario para insertar la consulta.

Exportar la aplicación de función por defecto () {return {

}}

generando datos ficticios para la barra de búsqueda

a continuación, vamos a crear algunos datos ficticios para la barra de búsqueda de filtro. Puede crear sus propios datos ficticios o simplemente el acceso Mockaroo y generar algunos datos ficticios fácilmente.

Vaya por delante y el inserto de los campos que necesite en los datos ficticios.

El número de filas que se crea debe ser básicamente el mismo número de objetos que recibe en los datos ficticios, por lo que será mejor si se reduce el número estándar de 1000. Asegúrese de ajustar el tipo de archivo para JSON.

Haga clic en Ver y copiar todos sus datos simulados en el editor de código.

Crear un archivo separado-llamémoslo maqueta date.json y pasado y los datos generados. El archivo JSON tendrá el siguiente aspecto:

Viendo los datos ficticios

Ahora antes de hacer la barra de búsqueda funcional, que se asignarán todos los datos y la visualización en la aplicación.

Importar los datos JSON, como:

fecha de la importación de «../ maqueta data.json»

Como datos ficticia es una matriz, que ‘ voy a utilizar la función de JavaScript ES6 mapa para desplazarse por cada objeto de la matriz y mostrarlo usando JSX.

{data.map ((POST) = (

)); }

Esto es cómo va a terminar:

Estilo Este barra de búsqueda

El estilo no es necesario, pero lo que es la diversión sin CSS? No dude en pasar a la siguiente sección si es bueno en demostraciones de estilo.

Vamos a tratar de centrar cada elemento, incluyendo la barra de búsqueda. El elemento padre tiene un nombre de clase de aplicación y por lo tanto le dirigirá a centralizar todo.

en el archivo styles.css, dirigir el nombre de la class.app y aplicar la propiedad de la flexión.

.app {display: flexión; Dirección flexible: columna; Justificar contenido: Centro; Alinee-Artículos: Centro; }

Mensajes todavía parecer aburrido. Vamos a hacer una tarjeta para cada puesto. Asignar un nombre de clase para el elemento de JSX en la función de mapa

// app.js {data.map ((post) = (

)).; }

Para hacer que cada distinguibles tarjeta, usaremos la propiedad de borde y las esquinas redondas.

/ * * App.css / Box {text-align: left;. Edge: Canto negro 1px; Ray of the Edge: 10px; Margen: 3px; Anchura: 20 RM; Padding-left: 10px; }

con el estilo hecho, ahora vamos a volver al foco principal del tutorial-hacer que la barra de búsqueda funcional!

Hacer la barra de búsqueda funcional

Ahora viene la parte interesante! Queremos realizar un seguimiento de cada cambio cada vez que el usuario escribe en el campo de entrada. Para ello, utilizamos Usestate gancho y establecer el estado cada vez que hay un cambio en el campo de entrada.

Importar datos de «../ maqueta data.json»; Importar {USESTATE} «Reacciona»; aplicación función predeterminada de exportación () {const [consulta, setQuery] = usestate ( «») de retorno {

})}

}}

La siguiente cosa queremos hacer es ver si corresponde la consulta insertados a cualquiera de los datos ficticios. En nuestro ejemplo, vamos a ver si el título del post corresponde a la consulta insertado. Este enfoque apoyará correspondencia parcial e idéntico.

en términos más básicos, si el usuario inserta una sola letra, la función devuelve todos los títulos de las entradas que incluyan esa letra. Del mismo modo, si el usuario introduce una palabra válida, la función de búsqueda devolverá una matriz que contiene títulos de las entradas que contengan esa palabra.

El método de filtro es perfecto en este escenario. Devuelve una matriz que satisface la condición especificada por la condición aquí volverían una nueva matriz que corresponde a lo que el usuario ha introducido.

Data.filter (post = {IF (consulta === «») {// Si la consulta está vacía, el retorno del poste;}}}} IF (post.title.tolowercase (). incluye (query.tolowercase ()) {// Devuelve la matriz de filtro de retorno del poste;}});

Vamos a ver si lo entiendo. Si el usuario no ha introducido nada, podemos decir que el campo de entrada no está en uso y la función de filtro devolverá la matriz original.

Si la consulta inserta coincide con ninguno de los datos (en nuestro caso, un título de la entrada de nuestro ejemplo blog), devolverá una nueva matriz con los objetos que coinciden con la consulta introducida por el usuario. Para evitar los errores causados ??por la capitalización de las letras, lo mejor es convertir la consulta insertadas por el usuario y la post.title de los datos ficticios en minúscula. De esa manera, no importa lo que el usuario inserta, incluso si son todas las letras minúsculas, nuestro filtro todavía será capaz de producir un resultado correspondiente, si se comprueba.

Para visualizar los datos filtrados, acabamos de combinamos con nuestro papel mapa anterior.

Su código final debe tener este aspecto:

{data.filter (post = {{SI (consulta === «) {vuelta de correo;} else if (Data.title..tolowercase () incluye (query.tolowercase ())) {vuelta de correo;}}). Mapa ((post, índice) = (

))}

y eso es todo! Buen trabajo en esta agitación. La barra de búsqueda debe estar activo y rápido.

Conclusión

Ahora que sabe cómo crear una barra de búsqueda en reaccionan cero, se puede personalizar aún más de acuerdo con los requisitos del proyecto. Se puede hacer llamar a una cierta API, así como mostrar los datos de manera similar.

Además, nos encontramos con algunas funciones de JavaScript ES6, que son muy útiles y se pueden utilizar para otras aplicaciones, como la calificación filtrado de datos para mostrar los datos de acuerdo con el orden deseado (fecha, orden alfabético, Tiempo etc.) utilizando la función Ordenar ().

En última instancia, la mayor ventaja de crear de cero es sin duda la flexibilidad del componente en comparación con otros paquetes de terceros por ahí. ¿Qué va a hacer que su barra de búsqueda hacer?

Compartir