使用人员选择器自定义编辑表单答案

【问题标题】：Custom Edit Form with People Pickers使用人员选择器自定义编辑表单
【发布时间】：2023-03-08 05:20:01
【问题描述】：

我正在为使用 office-ui-fabric-react 库构建的 SharePoint 创建自定义编辑表单。我最近在我的编辑表单中添加了一个人员选择器，并意识到查找列不会在正常的“获取”REST 调用中返回。似乎您必须为每个人员选择器进行选择和扩展。

我之前设置的 get 请求旨在通过自动调用列表名称和当前项目 ID 来尽可能地重复使用。在这一点上，我觉得我正在做一些艰难的事情，并想看看是否有其他人有使用 React SharePoint 编辑表单中的人员选择器列的经验。

我当前设置列值的工作流程如下。

编辑表单 componentDidMount 启动获取所有当前列值的请求
加载的值设置为状态
Edit 表单上的子组件正在将 this.state.loadedValues 作为 prop 值向下发送
在子组件中，值设置为this.props.value

目前看来，如果我想用当前值填充我的 React 组件，我必须首先对常用列进行正常的“获取”REST 调用，然后进行单独的 REST 调用并进行选择并展开我添加到表单中的每个人选择器。有更好的方法吗？

这是我的通用获取请求：

let req = new XMLHttpRequest;
        return new Promise((resolve, reject) => {
            req.open('GET', `${_spPageContextInfo.webAbsoluteUrl}/_api/Web/Lists/GetByTitle('${LIST_NAME}')/Items(${ITEM_ID})`, true);
            req.setRequestHeader('Content-Type', 'application/json;odata=verbose');
            req.setRequestHeader('Accept', 'application/json;odata=verbose');

            req.onload = async () => {
                // alert(req.status);
                if (req.status === 200) {
                    let response = JSON.parse(req.response);
                    resolve(response.d);
                } else {
                    reject(Error(req.statusText));
                }
            };
            req.onerror = () => {
                console.log(`Error: ${req.status}`);
                reject(Error('Network Error'));
            };
            req.send(null);
        });

【问题讨论】：

标签： reactjs office-ui-fabric

【解决方案1】：

我做了类似的事情，我使用一个 REST 调用来获取所有信息，包括扩展列。您只需要扩展查找，其他列无缝工作。

类似于"Id, Title, PeopleField1/Id, PeopleField1/Title, PeopleField1/EMail, FieldX, FieldY" 的列，只有"PeopleField1" 用于展开。

【讨论】：