简介
@bmplatform/react-select 是一个 React 的可定制下拉框组件，类似于 HTML 的 select 标签。它提供了很多高级的特性，如异步加载选项，搜索，标签，多选等。本教程将带领读者从安装到使用，帮助大家快速掌握该组件。
安装
在使用 @bmplatform/react-select 前，我们需要在工程中安装该组件，可以通过 npm 来完成安装，执行以下命令即可：
npm install --save @bmplatform/react-select
使用
安装成功后，在项目中引入该组件。这里我们通过 import 引入：
import Select from "@bmplatform/react-select"; import "@bmplatform/react-select/dist/react-select.css";
接下来，我们可以定义一个 options 数组来存放下拉框数据，并在 Render 方法中使用 Select 组件来呈现下拉框。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ------ ---- ---------------------------
------ -------------------------------------------------
----- ----- ------- --------- -
------------------ -
-------------
---------- - - --------------- ---- --
-
------------ - -------------- -- -
--------------- -------------- ---
------------------- ----------- ----------------
--
-------- -
----- - -------------- - - -----------
----- ------- - -
- ------ -------- ------ ------- --
- ------ --------- ------ -------- --
- ------ --------- ------ -------- -
--
------ -
-----
------ --------
-------
----------------------
----------------------------
-----------------
--
------
--
-
-
------ ------- ------上面的代码中，我们定义了一个 options 数组，并将其传入 Select 组件中。onChange 方法会在用户选择一个选项时被调用，并将该选项的值设置到 state 中。然后，我们将 selectedOption 属性和 options 属性传入 Select 组件中，这样下拉框就可以显示出来了。当用户选择一个选项时，handleChange 方法会被触发，我们可以在控制台中打印出该选项的值。
高级特性
异步加载选项
@bmplatform/react-select 提供了异步加载选项的功能。在某些情况下，我们可能需要从服务器获取大量的选项数据，这时同步加载会导致页面卡死，用户体验较差。这时，我们可以通过 AsyncSelect 组件来实现异步加载选项。
-- -------------------- ---- -------
------ ----------- ---- ---------------------------------
------ -------------------------------------------------
----- ----------- - ------------ --------- -- -
------------- -- -
-----------------------------------
-- ------
--
----- ------------ - ---------- -- -
------ ---------------- --
--------------------------------------------------------
--
--
----- ------- - -
- ------ ------ ------ ----- --
- ------ ------- ------ ------ --
- ------ -------- ------ ------- --
- ------ --------- ------ -------- --
- ------ --------- ------ -------- --
- ------ -------- ------ ------- --
- ------ -------- ------ ------- -
--
----- --- ------- --------------- -
----- - - --------------- ---- --
------------ - -------------- -- -
--------------- -------------- ---
------------------- ----------- ----------------
--
-------- -
----- - -------------- - - -----------
------ -
------------
------------
-------------------------
------------------------
----------------------
----------------------------
--
--
-
-在上面的代码中，我们定义了一个 loadOptions 方法来异步加载选项，在这个例子中，我们通过 setTimeout 模拟一个异步请求，然后在 callback 中返回筛选后的选项。
自定义选项
@bmplatform/react-select 支持自定义选项，我们可以把一个组件作为选项插入到 Select 组件中。
-- -------------------- ---- -------
------ ------ ---- ---------------------------
------ -------------------------------------------------
----- ------- - -
- ------ -------- ------ ------- --
- ------ --------- ------ -------- --
- ------ --------- ------ -------- -
--
----- ------------ - ----- -- -
-----
------------ --- -------- -- -
---- -------- ---------- ------- ---
------- -----------------------
----- ---------- ------------------
--
-------
---------
------- -----------------------
----- ---------- --------------------
-
-------
---------
------
--
-------------- ---------- --
------
--
----- --- - -- -- -
----- ---------------- ------------------ - ---------------
----- ------------ - -------------- -- -
----------------------------------
------------------- ----------- ----------------
--
----- ---------- - -- -- -
----------- ------ ---------
--
----- ------------ - -- -- -
------------- ------ ---------
--
----- --------------- - ------------------ -- -
-- ------------- --- --------- -
------ -
----------
------- ----- -- -
-------------
----------
---------- -- -------------
---------- -- ---------------
--
-
--
-
------ -------
---
------ -
-------
----------------------
-----------------------
-------------------------
--
--
--上面的代码中，我们在 options 数组中插入了一个自定义选项。CustomOption 组件用来渲染自定义选项，它会在渲染之前检查当前选项的 label 是否为 Custom，如果是，则在渲染之前插入两个 button 组件，用来模拟编辑和删除功能。
在 Select 组件中，我们通过 render 属性将 CustomOption 作为选项插入到 Select 组件中。
总结
通过本文的讲解，我们了解到了如何安装和使用 @bmplatform/react-select 组件，并学习了一些高级功能，包括异步加载选项和自定义选项。
@bmplatform/react-select 是一个非常实用的 React 下拉框组件，它拥有丰富的特性，能够满足各种需求。希望本文能对读者有所帮助，让大家在项目中能够更快更好的使用该组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056be981e8991b448e5a43