sharepoint - 如何在 SPFx webpart 中清除 PnP PeoplePicker 控件？

Question

我正在尝试在 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:[]});
}

我在单击“取消”按钮时正在更改状态，但不知何故它不起作用，有人可以帮我解决这个问题吗？

谢谢。

Answer 1

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

this.ppl.onChange([]);

这个对我有用。