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>

我希望用户能够将用户输入到人员选择器中并对其进行解析，然后提交。然后将该用户添加到共享点列表中的“人员”列。

Answer 1

我的测试代码供您参考（反应框架）。

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列表字段

1 个答案: