如何使用PnP.SP人员选择器设置SharePoint列表人员字段

我帮你排查下问题，你的代码里有几个关键错误，导致无法正确捕获和保存用户的选择：

1. selectedItems属性用法错误：PeoplePicker的selectedItems是用来设置初始已选中的用户，而不是绑定获取选中项的函数。你把_getPeoplePickerItems（获取所有站点用户的函数）赋值给它，这完全不符合组件的设计逻辑。
2. 没有捕获用户的选择变更：你没有监听PeoplePicker的选择变化事件，所以无法把用户选中的项同步到组件状态里。
3. 保存逻辑缺失：代码里没有提交选中用户到SharePoint列表的相关逻辑。

下面是修正后的完整代码示例，包含选择捕获和保存到列表的功能：

import React, { Component } from 'react';
import { PeoplePicker, PrincipalType } from '@pnp/spfx-controls-react/lib/PeoplePicker';
import { sp } from "@pnp/sp";

class YourComponent extends Component {
  constructor(props) {
    super(props);
    // 初始化状态，保存选中的用户
    this.state = {
      selectedUsers: []
    };

    // 绑定事件处理函数的this指向
    this.handlePeoplePickerChange = this.handlePeoplePickerChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  // 监听PeoplePicker的选择变更，更新状态
  handlePeoplePickerChange(selectedItems) {
    this.setState({
      selectedUsers: selectedItems
    });
  }

  // 提交选中用户到SharePoint列表
  async handleSubmit() {
    const { selectedUsers } = this.state;
    if (selectedUsers.length === 0) {
      alert('请选择至少一个用户');
      return;
    }

    // 转换选中用户为SharePoint Person列需要的格式
    const personFieldValues = selectedUsers.map(user => ({
      // Person列需要的核心字段，UserId是必须的
      UserId: user.id
    }));

    try {
      // 替换成你的列表名称和Person列的内部名称
      await sp.web.lists.getByTitle('你的列表名称').items.add({
        // 注意：这里的'PersonColumnInternalName'要替换成你实际的Person列内部名称
        PersonColumnInternalName: personFieldValues
      });
      alert('用户已成功添加到列表');
    } catch (error) {
      console.error('保存失败:', error);
      alert('保存失败，请查看控制台日志');
    }
  }

  render() {
    return (
      <div>
        <PeoplePicker 
          context={this.props.context} 
          titleText="People Picker" 
          personSelectionLimit={3} 
          groupName={''} 
          showtooltip={false} 
          isRequired={false} 
          disabled={false} 
          // 这里绑定初始选中项（如果需要的话），当前是从状态读取
          selectedItems={this.state.selectedUsers}
          // 监听选择变更事件
          onChange={this.handlePeoplePickerChange}
          showHiddenInUI={false} 
          principalTypes={[PrincipalType.User]} 
          resolveDelay={1000} 
        />
        {/* 添加提交按钮 */}
        <button onClick={this.handleSubmit}>提交用户到列表</button>
      </div>
    );
  }
}

export default YourComponent;

关键部分说明： #

• 状态管理：用selectedUsers状态来存储用户选中的人员，通过handlePeoplePickerChange同步选择变化。
• PeoplePicker事件绑定：使用onChange事件捕获用户的选择，这是获取选中项的正确方式。
• 列表保存逻辑：
  • 将选中的用户转换为SharePoint Person列要求的格式：每个用户对象需要包含UserId（用户的SP ID）。如果你的Person列允许多选，就传入数组；如果是单选，就取personFieldValues[0]。
  • 使用PnP JS的items.add()方法提交数据，注意替换成你实际的列表名称和Person列的内部名称（不是显示名称）。

额外提示： #

• 要获取列的内部名称，可以在SharePoint列表设置的列属性里查看，或者用PnP JS的sp.web.lists.getByTitle('列表名').fields.get()接口查询。
• 如果需要设置初始选中用户，可以在组件挂载时获取对应的用户数据，然后更新selectedUsers状态即可。

内容的提问来源于stack exchange，提问作者NightTom