简介

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

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

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

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

第 2 步 - 添加 React Select

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

npm install react-select@3.1.0

注意: 目前,最新版本的库 (3.1.0) 存在问题,它会在使用StrictMode时为旧版和已弃用的 API 生成警告。这些是个已知问题和一些待处理的问题拉取请求将解决其中的一些问题。

以下是修改App.js以显示水生动物下拉菜单的示例:

nano src/App.js

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

src/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;

你会注意到三件事:

• 您必须从react-select导入Select组件。

• 选项数组aquaticCreatures中的每个对象必须至少有两个值:label,一个字符串,和value,可以是任何类型。

• 唯一需要的道具是options数组。

注意: 如果您使用字符串数组填充 React Select 组件,而不是手动重复label和value,您可以使用JavaScript 的映射数组方法来准备options数组:

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

要捕获用户选择选项的时间,请添加onChange属性:

src/App.js

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

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

运行你的项目:

npm start

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

您将看到一个带有aquaticCreatures的 React Select 菜单:

如果您与此菜单交互,您将触发onChange事件并将消息记录到控制台。通过打开浏览器的开发者控制台,您应该看到您选择的label和value:

Output'Shark' 'Shark'

现在你有了一个可用的 React Select 菜单,你可以探索这个库提供的其他一些特性。

第 3 步 - 添加高级选项

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

多选

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

同样,在 React Select 中,您可以通过将isMulti属性添加到您的元素来启用多选:

src/App.js

<Select
  options={aquaticCreatures}
  isMulti
/>

出于探索目的,还需要修改onChange属性以支持多选,因为opt不再是单个对象。使用多选,它成为一个嵌套对象。opt.label和opt.value将返回undefined。

src/App.js

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

运行你的项目:

npm start

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

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

多选功能到此结束。

用户可创建的选项

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

首先,需要从react-select/creatable导入Creatable组件:

src/App.js

import Creatable from 'react-select/creatable';

然后,将Select组件替换为Creatable:

src/App.js

<Creatable
  options={aquaticCreatures}
/>

出于探索目的,还需要修改onChange属性以显示meta值:

src/App.js

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

运行项目:

npm start

当您键入一个当前不存在的选项(如Cuttlefish)时,您将看到一个'Create'选项:

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

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

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

另外,请注意label和value是相同的字符串。用户无法选择为label提供不同的value,这可能会影响您处理解决方案以实现数据存储一致性的方式。

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

异步选项加载

您可以使用async option loading让用户在您的应用程序中体验更快的初始加载时间。这只会在用户与之交互时填充组件。

与Creatable组件非常相似,您需要从react-select/async导入AsyncSelect:

import AsyncSelect from 'react-select/async'

然后,将Select组件替换为Async:

src/App.js

<AsyncSelect
  loadOptions={loadOptions}
/>

要加载选项,请将loadOptions属性传递给函数,类似于以下内容:

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

  callback(requestResults)
}

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

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

结论

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

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

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