@atlaskit/multi-select 是一个基于 React 的多选框组件，可以轻松地生成一个可搜索、可多选的下拉菜单。在前端开发过程中，多选框是一个很常见的组件，而 @atlaskit/multi-select 可以大大提高开发效率和用户体验。
安装
可以通过 npm 来安装 @atlaskit/multi-select 包：
npm install @atlaskit/multi-select
引入
在使用 @atlaskit/multi-select 组件前，需要将其引入到项目中：
import MultiSelect from '@atlaskit/multi-select'; import '@atlaskit/multi-select/dist/main.css';
使用
最简单的使用方法是将 MultiSelect 组件放在 React 组件的 render 方法中：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ---- -------------------------
------ ---------------------------------------
------ ------- -------- ----- -
----- ------- - -
- ------ ------ ------ ---------- --
- ------ ------ ------ -------------- --
- ------ ----- ------ --------- --
- ------ ----- ------ --------- --
- ------ ------ ------ ------------ --
--
------ -
------------
-----------------
-------------------
----------------------
--
--
-上述代码使用了一个数组作为 options，每个选项可以指定标签和值，同时还指定了占位符 placeholder 和选择后的回调函数 onChange。
更多使用的详细信息可以参考 官方文档。
深度学习
1. 自定义选项
MultiSelect 组件提供了默认的选项模板，但是如果需要自定义选项样式，可以通过 getOptionLabel、getOptionValue 和 Option 三个属性来实现。
-- -------------------- ---- -------
------------
-----------------
---------------------- -- -----------------------------------
---------------------- -- -------------
---------- ------- ------- -- -- -
---- -------- -------- ------- ----------- -------- -- ----------
-------
-----------------------------------------------------------------------------------
-------------
-------------------
-------- ------- -- --- - -- --
--
-------------------------
------
--
--其中，getOptionLabel 函数返回选项的文本表示，getOptionValue 函数返回选项的值，Option 组件则用于渲染每一个选项。
2. 自定义样式
要自定义样式，需要在引入 MultiSelect 的地方引入样式文件，然后将样式传入 styles 属性中：
import '@atlaskit/multi-select/dist/main.css';
import styles from './styles.css';
<MultiSelect
options={options}
styles={styles}
/>其中，./styles.css 是自定义的样式文件，具体样式代码可以参考 默认样式。
3. 自定义 Loading
在使用 asyncSelect 属性时，可以自定义 Loading 图标和文本：
<MultiSelect
asyncSelect
loadOptions={promiseOptions}
loadingMessage={({ inputValue }) => `正在搜索：${inputValue}`}
noOptionsMessage={({ inputValue }) => `无匹配项：${inputValue}`}
/>其中，loadingMessage 属性返回 Loading 状态下的文本，noOptionsMessage 返回无匹配项时的文本。
指导意义
使用 @atlaskit/multi-select 包可以方便地实现多选框组件，并且可以通过自定义选项和样式、异步搜索等功能定制化业务需求。这样可以提高开发效率，减少不必要的代码量。
同时，由于 @atlaskit/multi-select 代码开源，对于开发 React 组件的同学，可以参考其实现方式并且使用 Design System 开发模式，提高代码可复用性和可维护性。
更多 Design System 开发模式的信息可以参考本人的博客文章：Design System 开发模式在企业级前端应用中的实践。
完整代码示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ---- -------------------------
------ ---------------------------------------
------ ------ ---- -------------------
----- ------- - -
- ------ ------ ------ ---------- --
- ------ ------ ------ -------------- --
- ------ ----- ------ --------- --
- ------ ----- ------ --------- --
- ------ ------ ------ ------------ --
--
----- -------------- - ---------- --
--- --------------- -- -
------------- -- -
----- --------------- - --------------------- --
-------------------------------------------------------------
--
-------------------------
-- ------
---
----- ------ - -
---------- ---- -- --
--------
------ --------
---
------- ------ - ---------- -- -- --
--------
---------------- ---------- - --------- - --------
----------- ---------- - --- - ---------
---
--
------ ------- -------- ----- -
------ -
------------
-----------------
---------------------- -- -----------------------------------
---------------------- -- -------------
---------- ------- ------- -- -- -
---- -------- -------- ------- ----------- -------- -- ----------
-------
-----------------------------------------------------------------------------------
-------------
-------------------
-------- ------- -- --- - -- --
--
-------------------------
------
--
-----------
----------------------------
------------------ ---------- -- -- ---------------------
-------------------- ---------- -- -- ---------------------
-------------------
----------------------
---------------
--
--
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedab44b5cbfe1ea06106d3