清空下拉选择office-ui-fabric react组件

Question

我在清除下拉列表中的选择时遇到问题。由于选项数量的变化，我有时不得不清除下拉列表的选择。如果新的选项长度小于前一个，则选择点超出范围给出错误。

简单示例：（参见：[https://developer.microsoft.com/en-us/fabric#Variants][1]）

<Dropdown
              selectedKey={ selectedItem && selectedItem.key }
              onChanged={ item => this.setState({selectedItem: item}) }
              options={
                [
                  { key: 'A', text: 'Option a' },
                  { key: 'B', text: 'Option b' },
                ]
              }
/>

我唯一能想到的可能是控制 selectedKey，即将 selectedItem.key 设置为 null/undefined 以清除它，但我没有得到任何解决方案的运气..

Answer 1

我遇到的问题是我没有同时更改我的选项和选定的 ID。我所做的是将每个下拉菜单与一个对象相关联：

// ...async call .then( (newFruits) => ...
this.fruits = {
  selectedId: null,
  options: ['My','newly', 'fetched','fruits','array']
};

...fruits 将是您的可观察数组。

<Dropdown
    selectedKey={ fruits && fruits.selectedId }
    onChanged={ this.myFuncThatCallsApiWithNewId }
    options={fruits.options}
/>

清空下拉选择office-ui-fabric react组件

Clearing dropdown selection office-ui-fabric react component

javascript

reactjs

office-ui-fabric

mobx-react