office-ui-fabric - 覆盖 FluentUI 的 Picker 组件行为的最佳方法是什么？

Question

我想做的是... - 更改用户尝试键入内容时出现的标注。我想添加一个带有搜索框的自定义组件以及用户选择类别的能力。- 更改渲染文本的外观。就像人物选择器，但带有图标和文本。- 能够在单击外部按钮时触发标注出现。当单击按钮时，也许我可以在 Picker 上触发焦点事件。只是大声思考。

我尝试实现它，但没有太多的文档。任何与之相关的示例将不胜感激。

谢谢！

标签： office-ui-fabricoffice-ui-fabric-reactfluent-ui

Answer 1

更改用户尝试键入内容时出现的标注。我想添加一个带有搜索框的自定义组件以及用户选择类别的能力。

选择器主要用于显示与输入直接对应的选项，通常受输入约束。应该可以构建您所描述的内容，尽管我希望从头开始构建它比重新使用选择器更容易。

更改渲染文本的外观。就像人物选择器，但带有图标和文本。

从Picker示例开始，可以通过覆盖来更改建议的外观，onRenderSuggestionsItem如下所示：

<TagPicker
          onResolveSuggestions={this._onFilterChanged}
          onRenderSuggestionsItem={(p) => <TagItemSuggestion>
                                           <FontIcon iconName="Dictionary"/> key: {p.key}, name: {p.name}
                                          </TagItemSuggestion>}
        />

能够在单击外部按钮时触发标注出现。当单击按钮时，也许我可以在 Picker 上触发焦点事件

我建议使用 aref来访问命令式界面，然后focus()在单击按钮时调用。我不相信有一个 API 可以实际显示建议窗格，但这至少会将用户置于正确的上下文中。