React-Select 是一个 React 组件库，提供可视化的选择下拉框。react-select-fixed-v2 在 React-Select 的基础上，对一些已知的 Bug 进行了修复，并添加了一些新特性。
安装
可以使用 npm 或者 yarn 安装：
npm install react-select-fixed-v2 --save # 或者 yarn add react-select-fixed-v2
使用
首先需要引入组件和样式：
import React from 'react' import Select from 'react-select-fixed-v2' import 'react-select-fixed-v2/dist/react-select.css'
然后创建一个选项列表：
const options = [
{ value: 'apple', label: 'Apple' },
{ value: 'banana', label: 'Banana' },
{ value: 'cherry', label: 'Cherry' },
{ value: 'durian', label: 'Durian' },
]接下来创建一个空数组用于存储已选项的值：
const selectedOptions = []
然后创建一个回调函数，每当选择一个选项时，该函数就会被调用：
const handleSelectChange = (selectedOption) => {
selectedOptions.push(selectedOption)
}最后把组件渲染出来：
-- -------------------- ---- -------
----- ----------- - -- -- -
------ -
-----
-------
-----------------
-----------------------------
--
----------- ------------
----
----------------------------- ------ -- -
--- -------------------------------
---
-----
------
-
-现在，当选择一个选项后，该选项会被添加到选项列表中，同时被渲染出来。
高级用法
带标签的选项
有时，我们需要在一个选项的左边或右边添加一个标签，以示区别。react-select-fixed-v2 支持在选项列表中添加带标签的选项。
-- -------------------- ---- -------
----- ------- - -
- ------ -------- ------ -------- ----- ---- --
- ------ --------- ------ --------- ----- ---- --
- ------ --------- ------ --------- ----- ---- --
- ------ --------- ------ --------- ----- ---- --
-
----- ------------ - ------- -- -
------ -
------------------ -----------
---- -------- -------- ------- ----------- -------- ---
----- -------- ------------ ------ ---------------------------
------------------
------
--------------------
-
-
-------
-----------------
------------- ------- ------------ --
--可搜索选项
当选项列表很长时，可以提供一个搜索框，以方便用户进行查找。
-- -------------------- ---- ------- ----- ----------------- - - - ------ -------- ------ ------- -- - ------ --------- ------ -------- -- - ------ --------- ------ -------- -- - ------ --------- ------ -------- -- -- --- ------ - ------- --------------------------- ------------ --
选项的分组
如果选项列表很大，可以将选项分成几个组。
-- -------------------- ---- -------
----- -------------- - -
-
------ ---------
-------- -
- ------ -------- ------ ------- --
- ------ --------- ------ -------- --
- ------ --------- ------ -------- --
--
--
-
------ ----------
-------- -
- ------ ------ ------ ----- --
- ------ ------- ------ ------ --
- ------ ------ ------ ----- --
--
--
-
-------
------------------------
--总结
react-select-fixed-v2 提供了一些功能强大的选项列表特性，如带标签的选项、可搜索的选项、分组的选项等。使用它可以很方便地创建美观、易于使用的下拉框组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067359890c4f7277583e57