如何在 Fluent 中获取 Tag Picker 的所有选中值 UI

Question

在the docs中，一些道具在组件上不存在，所以我猜它已经过时了。

我有一个 TagPicker 组件，我正在使用带有内联建议的标签选择器。

<TagPicker
    onResolveSuggestions={filterSuggestedTags}
    getTextFromItem={getTextFromItem}
    pickerSuggestionsProps={{
      suggestionsHeaderText: 'Tags',
      noResultsFoundText: 'No tags found',
    }}
    pickerCalloutProps={{ doNotLayer: true }}
    inputProps={inputProps}
  />

而且我希望它的值存储在一个状态中（作为一个字符串数组）。 我试图找到选择和删除的事件，但找不到。 提前致谢！

Answer 1

对 add/remove 项使用 onChange 事件，对组件状态使用 selectedItems 事件。

// Import ITag interface from FluentUI.
const [selectedItems, setSelectedItems] = useState<ITag[]>([])

<TagPicker
  ...
  onChange={items => items && setSelectedItems(items)}
  selectedItems={selectedItems}
/>

Codepen 工作示例。