javascript - 清除下拉选择 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']
};

...水果将是您可观察的数组。

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