office-ui-fabric - 如何在其他地方更改时重置 FluentUI 下拉选择？

Question

我在 reactjs office 插件中使用FluentUI 下拉菜单，并希望在用户输入完全不同的文本框时重置它。我可以获得对下拉列表的引用并调用一些重置功能吗？

这是一个简单的单选下拉菜单，例如：

return <Dropdown
            placeholder={"Pick a thing"}
            label={"Things"}
            options={ thingOptions }
            onChange={ handleSelectThing }
       >

我看到了https://github.com/microsoft/fluentui/issues/5917但它似乎并不完全一样。

标签： office-ui-fabricfluent-uifluentui-react

Answer 1

我的反应还不够。归根结底，解决方案非常简单：

this.state = {
    // other state,
    selectedThing: undefined
}
const selectedThingKey =
      thingOptions.reduce(
        (acc, elt, index) => {
          return acc || (this.state.selectedThing === index && elt.key)
        },
        false);
return <Dropdown
        options={ thingOptions }
        onChange={ (ev,op,i) => {
            this.setState({selectedThing: i});
            return handleSelectThing(ev, op, i);
          }
        }
        selectedKey={ selectedThingKey }
        notifyOnReselect={true}
     />