如何使用 React-Select 创建可搜索的异步下拉菜单

笔记首页 >> 教程系列 >> 如何使用 React-Select 创建可搜索的异步下拉菜单

如何使用 React-Select 创建可搜索的异步下拉菜单

介绍

HTML 提供了一个<select>元素，允许最终用户从<option>s的下拉菜单中进行选择。但是，在某些情况下，选择菜单可以从额外的用户体验细节中受益，例如允许用户过滤可用的选项。

React Select是一个高度可配置的 React 选择菜单库，具有动态搜索和过滤功能。它还支持异步选项加载、可访问性和快速渲染时间。

在本教程中，您将把 React Select 添加到一个项目中。您还将探索一些可用的附加功能：多选、用户可创建的选项和异步选项加载。

先决条件

要完成本教程，您需要：

Node.js 的本地开发环境。按照如何安装 Node.js 并创建本地开发环境来完成此操作。

本教程已通过 Node v14.7.0、npmv6.14.7、reactv16.13.1 和react-selectv3.1.0 验证。

步骤 1 — 设置项目

从使用create-react-app生成一个 React App 开始，然后安装依赖项：

npx create-react-app react-select-example

切换到新的项目目录：

cd react-select-example

现在，您可以运行 React 应用程序：

npm start

修复项目的任何错误或问题，然后localhost:3000在网络浏览器中访问。

一旦你有了一个可用的 React 应用程序，你就可以开始添加 React Select。

第 2 步 – 添加 React Select

您的项目将需要安装react-select库：

npm install react-select@3.1.0

注意：目前，该库的最新版本 (3.1.0) 存在一个问题，即在使用StrictMode. 这些是已知问题，一些待处理的拉取请求将解决其中的一些问题。

下面是一个修改App.js显示水生动物下拉菜单的例子：

nano src/App.js

为React Select 提供aquaticCreatures的Select组件添加一个数组并使用它：

源代码/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;

你会注意到三件事：

您必须Select从导入组件react-select。
options 数组中的每个对象aquaticCreatures必须至少有两个值：label、字符串和value，可以是任何类型。
唯一需要的道具是options数组。

注意：如果你用一个字符串数组填充你的 React Select 组件，而不是手动重复labeland value，你可以使用JavaScript 的 map 数组方法来准备options数组：

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

要在用户选择选项时捕获，请添加onChange道具：

源代码/App.js

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

传递给onChange函数的值与构成选项本身的对象相同，因此它将包含label和value变量。

运行你的项目：

npm start

然后，localhost:3000在您的网络浏览器中访问。

您将看到一个 React Select 菜单，其中包含aquaticCreatures：

带有水生生物的 React Select 组件的屏幕截图

如果您与此菜单交互，您将触发一个onChange事件并将消息记录到控制台。通过打开浏览器的开发者控制台，您应遵守label与value您的选择：

Output'Shark' 'Shark'

现在你有一个可用的 React Select 菜单，你可以探索这个库提供的一些其他功能。

第 3 步 – 添加高级选项

除了搜索和选择，React Select 还提供其他功能，如多选、用户可创建的选项和异步选项加载。

多选

HTML<select>支持multiple允许选择多个<option>s。

同样，在 React Select 中，您可以通过将isMultiprop添加到元素来启用多选：

源代码/App.js

<Select
  options={aquaticCreatures}
  isMulti
/>

出于探索目的，onChange道具也需要修改以支持多选，因为opt不再是单个对象。使用多选，它变成一个嵌套对象。opt.label和opt.value否则将返回undefined。

源代码/App.js

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

运行你的项目：

npm start

然后，localhost:3000在您的网络浏览器中访问。

从中选择一个选项aquaticCreatures，然后选择另一个。您的所有多项选择都应由组件指示：

选择了 Shark 和 Dolphin 选项的 React Select 组件的屏幕截图

多选功能到此结束。

用户可创建的选项

您可以提供用户可创建的选项，以允许用户在菜单中不存在他们想要的选项的情况下向选择菜单添加自定义值。

首先，您需要Creatable从react-select/creatable以下位置导入组件：

源代码/App.js

import Creatable from 'react-select/creatable';

然后，将Select组件替换为Creatable：

源代码/App.js

<Creatable
  options={aquaticCreatures}
/>

出于探索目的，onChange道具也需要修改以显示meta值：

源代码/App.js

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

运行项目：

npm start

当你输入一个当前不存在的选项时——比如Cuttlefish——你会看到一个'Create'选项：

React Select 组件创建新 Cuttlefish 选项的屏幕截图

创建新菜单项后，您应该在浏览器的开发者控制台输出中观察以下内容：

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

请注意，您有两种方法可以检测事件是否为新选项：__isNew__所选选项的变量和事件处理程序中参数的action值meta。

另外，请注意label和value将是相同的字符串。没有为用户提供提供label不同的选项value，这可能会影响您处理解决方案以在数据存储中保持一致性的方式。

用户可创建的选项功能到此结束。

异步选项加载

您可以使用异步选项加载来让用户在您的应用程序中体验更快的初始加载时间。这只会在用户与其交互时填充组件。

就像Creatable组件一样，您需要AsyncSelect从react-select/async以下导入：

import AsyncSelect from 'react-select/async'

然后，将Select组件替换为Async：

源代码/App.js

<AsyncSelect
  loadOptions={loadOptions}
/>

要加载选项，请向loadOptionsprop传递一个函数，类似于以下内容：

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

  callback(requestResults)
}

React Select 还支持defaultOptionsprop，它loadOptions在初始化时调用函数来填充下拉列表，以及cacheOptionsprop，它在其值为真时缓存选项。

异步选项加载功能到此结束。

结论

在本教程中，您将 React Select 添加到项目中。React Select 的自定义和功能集有可能为您的用户提供比标准选择菜单更好的用户体验。

有关道具和高级功能的其他信息可以在 React Select 文档中找到。

如果您想了解有关 React 的更多信息，请查看我们的How To Code in React.js系列，或查看我们的 React 主题页面以获取练习和编程项目。

觉得文章有用？

点个广告表达一下你的爱意吧！