如何在 SPFx webpart 中清除 PnP PeoplePicker 控件？答案

【问题标题】：How to clear PnP PeoplePicker control in SPFx webpart?如何在 SPFx webpart 中清除 PnP PeoplePicker 控件？
【发布时间】：2021-08-17 16:18:57
【问题描述】：

我正在尝试在 SharePoint online spfx webpart 中以编程方式清除 PnP People piker 控件，我正在使用带有保存和取消按钮的简单表单，该按钮将数据保存在列表中，在“取消”按钮上我想清除 PeoplePicker 值

<PeoplePicker
   context={this.props.context}
   personSelectionLimit={1}
   groupName=""
   showtooltip={false}
   onChange={(value) => this.getPeoplePickerItems(value, "col")}
   showHiddenInUI={false}
   defaultSelectedUsers={this.state.ApprovarSelected}
   principalTypes={[PrincipalType.User]}
   ensureUser={true}
   />

OnChange 事件

private getPeoplePickerItems(items: any[], col) {
    if (items.length > 0) {
      this.state.ListItem.Approvar = { id: items[0].id, secondaryText: items[0].secondaryText, text: items[0].text };
    }
    else {
      this.state.ListItem.Approvar = { id: '', secondaryText: '', text: '' };
    }
  }

取消按钮

public onClickCancel() {
this.setState({ ApprovarSelected:[]});
}

单击取消按钮时我正在更改状态，但不知何故无法正常工作，谁能帮我解决这个问题？

谢谢。

【问题讨论】：

标签： sharepoint sharepoint-online spfx peoplepicker pnp-js

【解决方案1】：

我得到了解决方案，在 PeoplePicker 控件中添加ref={c => { this.ppl = c }} 并在取消按钮上编写以下代码。

this.ppl.onChange([]);

它对我有用。

【讨论】：

this.ppl.onChange([]); 中的 ppl 是什么？