Fluent / Fabric - возможно ли очистить ввод NormalPeoplePicker программно?

#office-ui-fabric

Вопрос:

Можно ли очистить вводимый текст (например, «qweqweqweqwe» в примере ниже) из (Fluent / Fabric) NormalPeoplePicker программно?

Я попытался получить доступ к элементу ввода (через событие onBlur) и попытался изменить его значение и innerHTML, но это не сработало. Кроме того, это не кажется хорошим способом сделать это.

https://developer.microsoft.com/en-us/fluentui#/controls/web/peoplepicker

1.Взгляните на этот пример line 104 codepen.io/savkelita/pen/bGwwNmP Похоже, что они сохраняют входное значение внутри состояния, и его невозможно изменить напрямую. Я использую onBlur событие и updateValue метод. Это взлом, но, возможно, это хороший момент для начала. developer.microsoft.com/en-us/fluentui#/controls/web /…

2. @MarkoSavic Спасибо. Полностью согласен с вашим комментарием, но он работает и на данный момент будет достаточным. Если вы превратите свой комментарий в ответ, я пометлю его как правильный.

Ответ №1:

NormalPeoplePicker Component сохраняйте входное значение внутри state , и его невозможно изменить напрямую:

 const picker = React.useRef(null)

...

<NormalPeoplePicker
  ...
  onBlur={() => {
    if(picker.current) {
      picker.current.input.current.value = ""; // Uncaught TypeError: Cannot set property value of #<Autofill> which has only a getter
    }
  }}
/>

Из официальной документации внутри раздела реализации есть полезный метод updateValue , который позволяет изменять входное значение.

 const picker = React.useRef(null)
...

<NormalPeoplePicker
  ...
  onBlur={() => {
    if(picker.current) {
      picker.current.input.current._updateValue("");
    }
  }}
/>

Рабочий пример Codepen ln: 104 .

Примечание:

Это временное решение, протестируйте каждый вариант использования перед производством.

Ответ №2:

 let orgSelected: ITag[] = [];
orgSelected.push({key:0 name:''});
const [selectedOrg,setselectedOrg] = useState(orgSelected);
On TagPicker Property just assign the statevalue like this.
selectedItems={selectedOrg}

This way the tagpicker property will always be selected with an empty item.