将人员选取器添加到 sharepoint 联机 Web 部件

Question

我有此代码并想从https://social.technet.microsoft.com/wiki/contents/articles/37728.sharepoint-online-step-by-step-client-side-people-picker-control.aspx#Full_Code 添加人员选择器

import { Version } from '@microsoft/sp-core-library';

import {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
PropertyPaneTextField
} from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';

import styles from './FinanceSysAccWebPart.module.scss';
import * as strings from 'FinanceSysAccWebPartStrings';
import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';
import { IListItem } from './app/interfaces/IListItem';


export interface IFinanceSysAccWebPartProps {
listName: string;
}
export interface ISpFxPureWebPartProps {
  description: string;
}


export default class FinanceSysAccWebPart extends BaseClientSideWebPart<IFinanceSysAccWebPartProps> 
{

private listItemEntityTypeName: string = undefined;  
public render(): void {
this.domElement.innerHTML = `


  <div class="${ styles.financeSysAcc }">
    <div class="${ styles.container }">
      <div class="${ styles.row }">
        <div class="${ styles.column }">
          <span class="${ styles.title }">Finance System Access Request Form</span>


          <p class="${styles.description}">Name: ${escape(this.properties.listName)}</p>  
          <table>
            <tr>
              <td>First Name: </td>
              <td><input id="txtFirstName" name="txtFirstName" type="text" /></td>
            </tr>
            <tr>
              <td>Last Name: </td>
              <td><input id="txtSurName" name="txtSurName" type="text" /></td>
            </tr>
          </table>



          <div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">  
            <div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">  
              <div class="status"></div>  
              <ul class="items"><ul>  
            </div>  
          </div>  

        </div>  
      </div>  
    </div>
  </div>

  `;
  //let FirstName = (<HTMLInputElement> document.getElementById("txtFirstName")).value; 
   this.setButtonsEventHandlers(); 

}

最好的方法是什么？我在 webpart 中看不到脚本标签。

Answer 1

在 SPFx 解决方案中使用原生 JavaScript 会比经典页面更复杂，并且不会出现编译错误/提示。

我建议您在解决方案中使用@pnp/spfx-controls-react People Picker。

Demo thread