Cómo crear menús desplegables asincrónicos que se puedan buscar con React-Select

Introducción

HTML proporciona un selectelemento que permite a los usuarios finales elegir entre un menú desplegable de optionopciones. Sin embargo, puede haber situaciones en las que un menú de selección pueda beneficiarse de mejoras adicionales en la experiencia del usuario, como permitir al usuario filtrar las opciones disponibles.

React Select es una biblioteca de menús de selección altamente configurable para React que incluye búsqueda y filtros dinámicos. También admite la carga asincrónica de opciones, accesibilidad y tiempos de renderizado rápidos.

En este tutorial, agregarás React Select a un proyecto. También explorarás algunas de las funciones adicionales disponibles: selección múltiple, opciones que puede crear el usuario y carga de opciones asincrónica.

Prerrequisitos

Para completar este tutorial, necesitarás:

• Un entorno de desarrollo local para Node.js. Siga el procedimiento Cómo instalar Node.js y crear un entorno de desarrollo local para lograrlo.

Este tutorial fue verificado con Node v14.7.0, npmv6.14.7, reactv16.13.1 y react-selectv3.1.0.

Paso 1: Configuración del proyecto

Comience a usar create-react-apppara generar una aplicación React y luego instale las dependencias:

npx create-react-app react-select-example

Cambiar al nuevo directorio del proyecto:

cd react-select-example

Ahora, puedes ejecutar la aplicación React:

npm start

Corrija cualquier error o problema con su proyecto y luego visítelo localhost:3000en un navegador web.

Una vez que tenga una aplicación React en funcionamiento, puede comenzar a agregar React Select.

Paso 2: agregar React Select

Su proyecto requerirá la instalación de la react-selectbiblioteca:

npm install react-select@3.1.0

Nota: Actualmente, hay un problema con la última versión de la biblioteca (3.1.0), que genera advertencias sobre API antiguas y obsoletas al usar StrictMode. Estos son problemas conocidos y algunas solicitudes de incorporación de cambios pendientes solucionarán algunos de ellos.

A continuación se muestra un ejemplo de modificación App.jspara mostrar un menú desplegable de animales acuáticos:

nano src/App.js

Agregue una matriz aquaticCreaturesy use el Selectcomponente proporcionado por React Select:

fuente/App.js

import React from 'react';import Select from 'react-select';const aquaticCreatures = [  { label: 'Shark', value: 'Shark' },  { label: 'Dolphin', value: 'Dolphin' },  { label: 'Whale', value: 'Whale' },  { label: 'Octopus', value: 'Octopus' },  { label: 'Crab', value: 'Crab' },  { label: 'Lobster', value: 'Lobster' },];function App() {  return (    div className="App"      Select        options={aquaticCreatures}      /    /div  );}export default App;

Notarás tres cosas:

• Debes importar el Selectcomponente desde react-select.
• Cada objeto de la matriz de opciones aquaticCreaturesdebe tener al menos dos valores: label, una cadena, y value, que puede ser de cualquier tipo.
• La única propiedad requerida es la optionsmatriz.

Nota: Si está completando su componente React Select con una matriz de cadenas, en lugar de repetir manualmente labely value, puede usar el método map array de JavaScript para preparar la optionsmatriz:

someArrayOfStrings.map(opt = ({ label: opt, value: opt }));

Para capturar cuándo el usuario selecciona una opción, agregue la onChangepropiedad:

fuente/App.js

Select  options={aquaticCreatures}  onChange={opt = console.log(opt.label, opt.value)}/

El valor que se pasa a la onChangefunción es el mismo objeto que compone la opción en sí, por lo que contendrá las variables labely value.

Ejecute su proyecto:

npm start

Luego, visite localhost:3000en su navegador web.

Se le presentará un menú React Select con aquaticCreatures:

Si interactúa con este menú, activará un onChangeevento y registrará mensajes en la consola. Al abrir la consola de desarrollador de su navegador, debería observar el labely valuede sus opciones:

Output'Shark' 'Shark'

Ahora que tienes un menú React Select en funcionamiento, puedes explorar algunas de las otras características que ofrece esta biblioteca.

Paso 3: Agregar opciones avanzadas

Además de la búsqueda y selección, React Select ofrece otras funciones como selección múltiple, opciones creables por el usuario y carga de opciones asincrónica.

Selección múltiple

HTML selectadmite multiplela selección de varios options.

De manera similar, en React Select, puedes habilitar la selección múltiple agregando la isMultipropiedad a tu elemento:

fuente/App.js

Select  options={aquaticCreatures}  isMulti/

Para fines de exploración, onChangetambién será necesario modificar la propiedad para que admita la selección múltiple, ya que optya no es un objeto único. Con la selección múltiple, se convierte en un objeto anidado opt.labely, opt.valuede lo contrario, habría devuelto undefined.

fuente/App.js

Select  options={aquaticCreatures}  isMulti  onChange={opt = console.log(opt)}/

Ejecute su proyecto:

npm start

Luego, visite localhost:3000en su navegador web.

Seleccione una opción de la lista aquaticCreaturesy, a continuación, seleccione otra. Todas las selecciones múltiples deben estar indicadas por el componente:

Con esto concluye la función de selección múltiple.

Opciones que puede crear el usuario

Puede proporcionar opciones que puedan crear los usuarios para permitirles agregar valores personalizados al menú de selección en situaciones donde la opción que desean no está presente en el menú.

Primero, debes importar el Creatablecomponente desde react-select/creatable:

fuente/App.js

import Creatable from 'react-select/creatable';

Luego, reemplace el Selectcomponente con Creatable:

fuente/App.js

Creatable  options={aquaticCreatures}/

Para fines de exploración, onChangetambién será necesario modificar la propiedad para mostrar el metavalor:

fuente/App.js

Creatable  options={aquaticCreatures}  onChange={(opt, meta) = console.log(opt, meta)}/

Ejecutar el proyecto:

npm start

Cuando escribe una opción que no existe actualmente (por ejemplo Cuttlefish), se le presentará una 'Create'opción:

Después de crear el nuevo elemento de menú, debería observar lo siguiente en la salida de la consola de desarrollador de su navegador:

Output{ label: 'Cuttlefish', value: 'Cuttlefish', __isNew__: true }{ action: 'create-option' }

Tenga en cuenta que tiene dos formas de detectar que el evento es una nueva opción: la __isNew__variable de la opción seleccionada y el actionvalor del metaargumento en el controlador de eventos.

Además, observe cómo labely valueserán cadenas idénticas. A los usuarios no se les proporciona una opción para proporcionar a labelcon un diferente value, lo que puede afectar la forma en que aborda su solución para lograr coherencia en su almacén de datos.

Con esto concluye la función de opciones que puede crear el usuario.

Carga de opciones asincrónicas

Puede utilizar la opción de carga asincrónica para permitir que los usuarios experimenten tiempos de carga iniciales más rápidos en su aplicación. Esto solo completará el componente cuando el usuario interactúe con él.

Al igual que el Creatablecomponente, necesitarás importar AsyncSelectdesde react-select/async:

import AsyncSelect from 'react-select/async'

Luego, reemplace el Selectcomponente con Async:

fuente/App.js

AsyncSelect  loadOptions={loadOptions}/

Para cargar las opciones, pase a la loadOptionspropiedad una función similar a la siguiente:

const loadOptions = (inputValue, callback) = {  // perform a request  const requestResults = ...  callback(requestResults)}

React Select también admite la defaultOptionspropiedad prop, que llama a la loadOptionsfunción en la inicialización para completar el menú desplegable, y la cacheOptionspropiedad prop, que almacena en caché las opciones mientras su valor sea verdadero.

Con esto concluye la función de carga de opciones asíncronas.

Conclusión

En este tutorial, agregaste React Select a un proyecto. El conjunto de funciones y personalización de React Select tiene el potencial de brindarles a tus usuarios una mejor experiencia que un menú de selección estándar.

Puede encontrar información adicional sobre las propiedades y las funciones avanzadas en la documentación de React Select.

Si desea obtener más información sobre React, eche un vistazo a nuestra serie Cómo codificar en React.js o consulte nuestra página de temas de React para ver ejercicios y proyectos de programación.