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

【问题标题】：Fluent/Fabric - Is it possible to clear the input of the NormalPeoplePicker programmatically?Fluent/Fabric - 是否可以以编程方式清除 NormalPeoplePicker 的输入？
【发布时间】：2021-03-19 23:22:59
【问题描述】：

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

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

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

【问题讨论】：

看看这个例子 line 104 codepen.io/savkelita/pen/bGwwNmP 好像他们将输入值保存在状态中并且无法直接更改它。我正在使用onBlur 事件和updateValue 方法。这是一个 hack，但也许是一个很好的起点。 developer.microsoft.com/en-us/fluentui#/controls/web/…
@MarkoSavic 谢谢。完全同意您的评论，但它确实有效，目前就足够了。如果你把你的评论变成答案，我会把它标记为正确的。

标签： office-ui-fabric

【解决方案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 exampleln: 104.

注意：

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

【讨论】：

正如 Marko 所说，这是未定义的行为。它可以工作，但 React/Fluent 属性将是理想的。