在前端开发过程中，我们有时会需要使用 Microsoft SharePoint 中的人员选择器来选择用户。这个过程可以使用 npm 包 sp-peoplepicker 来实现。这篇文章将详细介绍如何使用 sp-peoplepicker，以及如何应用它到你的项目中。
安装
在使用 sp-peoplepicker 之前，需要先安装它。可以在终端中执行以下命令来安装 sp-peoplepicker：
npm install sp-peoplepicker
使用
使用 sp-peoplepicker 时，需要引入 sp-peoplepicker 包和相关样式。可以像下面这样在你的项目中引入它：
import { PeoplePicker } from 'sp-peoplepicker';
import 'sp-peoplepicker/dist/PeoplePicker.css';在引入之后，你就可以在你的项目中使用 PeoplePicker 组件了。下面是一个简单的示例代码：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ -------- ---- ------------
------ - ------------ - ---- ------------------
------ ----------------------------------------
-------- ----- -
----- --------------- ----------------- - -------------
-------- ----------------------- -
------------------------
-
------ -
-----
---------- ------ ------------
------------- --------------------------- --
----
------------------------- ------ -- -
--- ----------------------------
---
-----
------
--
-
-------------------- --- ---------------------------------在这个例子中，我们创建了一个 PeoplePicker 组件，并将它渲染到页面上。我们还使用 useState 函数来存储用户选择的结果，并在页面上显示它们。
参数
PeoplePicker 组件支持多个参数。以下是一些最常用的参数：
onChange
当用户选择一个新用户时，onChange 函数会被调用。这个函数有一个参数，它包含了用户选择的结果。
principalTypes
principalTypes 参数用来定义用户选择器中可以选择的 Principal 类型。可以指定以下选项（用逗号分隔）：
- User：用户
- DLG：分发列表
- SecGroup：安全组
- SPGroup：SharePoint 组
- DistributionList：发送通知的分发列表
默认情况下，该参数的值为 "User"。
defaultSelectedUsers
可以使用 defaultSelectedUsers 参数来指定默认的选择用户。
inputPlaceholder
inputPlaceholder 参数定义了用户选择器中输入框的占位符文本。
maximumEntitySuggestions
maximumEntitySuggestions 参数定义了用户选择器中最大建议数。建议包括用户和组，以及与之相关的搜索单词。
总结
在本文中，我们介绍了如何在前端应用程序中使用 sp-peoplepicker 包。我们看到了如何安装和使用它，以及如何为我们的应用程序提供更多的参数设置。希望这篇文章对你有帮助，并帮助你更好地完成你的前端开发任务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005535d81e8991b448d097a