Fluent/Fabric - 是否可以通过编程方式清除 NormalPeoplePicker 的输入？

Question

是否可以通过编程方式清除 (Fluent/Fabric) NormalPeoplePicker 的输入文本（例如下例中的“qweqweqweqwe”）？

我已经尝试访问输入元素（通过 onBlur 事件）并尝试更改它的 value 和 innerHtml 但那没有不工作。另外，这似乎不是一个好方法。

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

Answer 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
    }
  }}
/>

在实现部分的 Official Documentation 中，有一个有用的方法 updateValue 允许更改输入值。

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

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

Codepen working example ln: 104.

注：

这是一个临时解决方案，在生产前测试每个用例。

Fluent/Fabric - 是否可以通过编程方式清除 NormalPeoplePicker 的输入？

Fluent/Fabric - Is it possible to clear the input of the NormalPeoplePicker programmatically?

office-ui-fabric