Clear the People Picker control on button click

Question

I am using the People Picker control in my SPFx web part.

I want to clear the value of this control on the button click.

as mentioned in the comments here, I tried to set the value of defaultSelectedUsers property to an empty array but still, I am not able to clear the people picker.

How can I achieve the above behavior?

Answer 1

Declare a refer to reference the people picker control so you could clear the value.

<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}
              ref={c => (this.ppl = c)} 
            />
            <br/>
            <button onClick={() => {this.ppl.state.selectedPersons=[];this.ppl.onChange([]); console.log(this.ppl);/*this.setState({PeoplePickerDefaultItems: []})*/}}>Clear User</button>

Declare a variable in class(component)

protected ppl;