介绍
HTML 提供了一个<选择>元素,允许最终用户从<选项>的下滑菜单中进行选择,然而,可能有情况下,选择菜单可以受益于额外的用户体验优点,例如允许用户过滤可用的选择。
React Select是React的高度可配置的选择菜单库,具有动态搜索和过滤功能,还支持async选项加载、可访问性和快速渲染时间。
在本教程中,您将添加 React Select 到项目中,您还将探索一些可用的额外功能:多选择,用户可创建的选项,以及非同步选项加载。
前提条件
要完成本教程,您将需要:
- Node.js 的本地开发环境,请遵循 如何安装 Node.js 和创建本地开发环境以实现此。
本教程已通过 Node v14.7.0、npm v6.14.7、react v16.13.1 和 react-select v3.1 进行验证。
步骤1 - 设置项目
开始使用 create-react-app来生成 React App,然后安装依赖:
1npx create-react-app react-select-example
更改到新项目目录:
1cd react-select-example
现在,您可以运行 React 应用程序:
1npm start
修复您的项目中的任何错误或问题,然后在网页浏览器中访问localhost:3000。
一旦你有一个工作 React 应用程序,你可以开始添加 React Select。
步骤 2 – 添加 React Select
您的项目将需要安装响应选择库:
1npm install [email protected]
美元(注)
** 注意: ** 目前,该库的最新版本(3.1.0)出现了问题,在使用StrictMode时,它会生成对旧版和过时的API的警告,这些是已知的问题(https://github.com/JedWatson/react-select/issues/4094),并且一些正在等待的拉动请求将解决其中一些问题
<$>
以下是修改App.js的例子,以显示水生动物的下滑菜单:
1nano src/App.js
添加aquaticCreatures的数组,并使用 React Select 提供的Select组件:
1[label src/App.js]
2import React from 'react';
3import Select from 'react-select';
4
5const aquaticCreatures = [
6 { label: 'Shark', value: 'Shark' },
7 { label: 'Dolphin', value: 'Dolphin' },
8 { label: 'Whale', value: 'Whale' },
9 { label: 'Octopus', value: 'Octopus' },
10 { label: 'Crab', value: 'Crab' },
11 { label: 'Lobster', value: 'Lobster' },
12];
13
14function App() {
15 return (
16 <div className="App">
17 <Select
18 options={aquaticCreatures}
19 />
20 </div>
21 );
22}
23
24export default App;
你会注意到三件事:
- 您必须从 react-select 中导入
选择组件 - 选项组合中的每个对象必须至少有两个值:
标签,一个字符串和值,这可能是任何类型的 - 唯一需要的支持是
选项组合
<$>[注]
注: 如果您正在填充 React Select 组件的数组字符串,而不是手动重复标签和值,您可以使用 JavaScript 的地图数组方法来准备选项数组:
1someArrayOfStrings.map(opt => ({ label: opt, value: opt }));
美元
若要捕捉用户选择一个选项时,请添加onChange口号:
1[label src/App.js]
2<Select
3 options={aquaticCreatures}
4 onChange={opt => console.log(opt.label, opt.value)}
5/>
传递给onChange函数的值是构成选项本身的相同对象,因此它将包含标签和值变量。
运行您的项目:
1npm start
然后,在您的 Web 浏览器中访问Localhost:3000。
您将收到一个 React Select 菜单,包含aquaticCreatures:
如果您使用此菜单进行交互,您将触发onChange事件并将邮件记录到控制台. 打开浏览器的开发者控制台时,您应该观察您的选择的标签和值:
1[secondary_label Output]
2'Shark' 'Shark'
现在你有一个工作 React Select 菜单,你可以探索这个库提供的一些其他功能。
步骤 3 – 添加高级选项
除了搜索和选择之外,React Select还提供其他功能,如多选择、用户可创建的选项和非同步选项加载。
多选择
HTML <select> 支持 multiple 以允许选择多个 <option>。
同样,在 React Select 中,您可以通过将isMulti口号添加到您的元素来启用多选择:
1[label src/App.js]
2<Select
3 options={aquaticCreatures}
4 isMulti
5/>
为了探索目的,‘onChange’ prop 也需要修改以支持多选择,因为‘opt’不再是单个对象。
1[label src/App.js]
2<Select
3 options={aquaticCreatures}
4 isMulti
5 onChange={opt => console.log(opt)}
6/>
运行您的项目:
1npm start
然后,在您的 Web 浏览器中访问Localhost:3000。
从aquaticCreatures中选择一个选项,然后选择另一个选项。
这结束了多选择的特征。
用户可创建的选项
您可以指定 user-creatable options以允许用户在他们想要的选项不在菜单中时将自定义值添加到选择菜单中。
首先,您需要从react-select/creatable中导入Creatable组件:
1[label src/App.js]
2import Creatable from 'react-select/creatable';
然后,将选择组件替换为可创建:
1[label src/App.js]
2<Creatable
3 options={aquaticCreatures}
4/>
为了探索目的,还需要修改onChange,以显示meta值:
1[label src/App.js]
2<Creatable
3 options={aquaticCreatures}
4 onChange={(opt, meta) => console.log(opt, meta)}
5/>
运行该项目:
1npm start
当您键入目前不存在的选项 - 例如Cuttlefish - 时,您将收到一个Create选项:
创建新菜单项目后,您应该在浏览器的开发者控制台输出中观察下列内容:
1[secondary_label Output]
2{ label: 'Cuttlefish', value: 'Cuttlefish', __isNew__: true }
3{ action: 'create-option' }
请注意,您有两种方法可以检测事件是新选项:您选择的选项的__isNew__变量和事件处理器中的meta参数的动作值。
此外,请注意标签和值将是相同的字符串,用户没有提供提供具有不同的值的标签的选项,这可能会影响您如何在数据存储中找到一致性的解决方案。
这结束了用户可创建的选项功能。
Async 选项加载
您可以使用 async option loading来允许用户在应用程序中体验更快的初始加载时间。
与可创建组件相似,您需要从反应选择/async中导入AsyncSelect:
1import AsyncSelect from 'react-select/async'
然后,将选择组件替换为Async:
1[label src/App.js]
2<AsyncSelect
3 loadOptions={loadOptions}
4/>
要加载选项,请通过loadOptions prop 函数,类似于以下:
1const loadOptions = (inputValue, callback) => {
2 // perform a request
3 const requestResults = ...
4
5 callback(requestResults)
6}
React Select 还支持默认选项预告片,该预告片在初始化时呼叫加载选项函数以填充下落,以及缓存选项预告片,该预告片在其值为 true 时缓存选项。
这结束了 async 选项加载功能。
结论
在本教程中,您已将 React Select 添加到项目中,React Select 的定制和功能集具有提供用户比标准选择菜单更大的用户体验的潜力。
有关 props和 高级功能的其他信息可以在 React Select 文档中找到。
如果您想了解更多关于 React 的信息,请查看我们的 如何在 React.js 中编码系列,或查看 我们的 React 主题页面以获取练习和编程项目。