如何使用 pnp.sp 人员选取器设置 SharePoint 列表字段

Question

我不知道添加用户的代码，在 pnp.sp 库的人员选择器中选择。

我已经尝试了下面的代码示例（通过使用 State），但据我所知，这并没有保存用户的选择。

private _getPeoplePickerItems() {
    pnp.sp.web.siteUsers.get().then((data) =>{
      this.setState({
        DeptContact: data
      });
    });
}

以及渲染中的人物选择器：

<PeoplePicker
            context={this.props.context}
            titleText="People Picker"
            personSelectionLimit={3}
            groupName={''} 
            showtooltip={false}
            isRequired={false}
            disabled={false}
            selectedItems={this._getPeoplePickerItems}
            showHiddenInUI={false}
            principalTypes={[PrincipalType.User]}
            resolveDelay={1000} 
            />  
          </div>
          </div>

我希望用户能够在人员选择器中输入用户并解决它，然后提交。然后该用户被添加到共享点列表中的 'Person' 列。

Answer 1

我的测试代码供大家参考（react框架）

import * as React from 'react';
import styles from './PnpReact.module.scss';
import { IPnpReactProps } from './IPnpReactProps';
import { escape } from '@microsoft/sp-lodash-subset';
import pnp from "@pnp/pnpjs";

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


export interface IDefaultData{ 
  PeoplePickerDefaultItems:string[];
}
export default class PnpReact extends React.Component<IPnpReactProps, IDefaultData> {

  public constructor(props: IPnpReactProps,state: IDefaultData){ 
    super(props); 
    this.state = { 
      PeoplePickerDefaultItems:[] 
    }; 
  }

  //get users from peoplepicker
  private _getPeoplePickerItems(items: any[]) {      
    console.log(items);      
}

public componentDidMount(){
  this.GetDefaultUsers();  
}
private GetDefaultUsers() {    
  pnp.sp.web.siteUsers.get().then((items: any[]) =>{        
    var defaultUsers:string[]=[];
    //get last 2 users    
    for(var i=items.length-1;i>items.length-3;i--){      
      defaultUsers.push(items[i].Email);
    }    
    this.setState({ 
      PeoplePickerDefaultItems:defaultUsers
    });     
  });  
}

  public render(): React.ReactElement<IPnpReactProps> {

    return (
      <div className={ styles.pnpReact }>
        <div className={ styles.container }>
          <div className={ styles.row }>
          <PeoplePicker
            context={this.props.context}
            titleText="People Picker"
            personSelectionLimit={3}
            groupName={''} 
            showtooltip={false}
            isRequired={false}
            disabled={false}
            selectedItems={this._getPeoplePickerItems}   
            defaultSelectedUsers={this.state.PeoplePickerDefaultItems}          
            showHiddenInUI={false}
            principalTypes={[PrincipalType.User]}
            resolveDelay={1000} 
            />  
            <div className={ styles.column }>
              <span className={ styles.title }>Welcome to SharePoint!</span>
              <p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>
              <p className={ styles.description }>{escape(this.props.description)}</p>
              <a href="https://aka.ms/spfx" className={ styles.button }>
                <span className={ styles.label }>Learn more</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

如何使用 pnp.sp 人员选取器设置 SharePoint 列表字段

How to set a SharePoint list field using a pnp.sp People Picker

sharepoint-online

spfx