如何清除SPFx How部件中的PnP PeoplePicker控件？

Question

我正尝试在SharePoint online spfx the部件中以编程方式清除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:[]});
}

我在单击取消按钮的同时更改状态，但不知何故不起作用，有人能帮我吗？

谢谢。

Answer 1

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

this.ppl.onChange([]);

这对我很管用。