Office UI Fabric React - 下拉列表不尊重 selectedKey 道具答案

【问题标题】：Office UI Fabric React - Dropdown not respecting selectedKey propOffice UI Fabric React - 下拉列表不尊重 selectedKey 道具
【发布时间】：2020-05-17 01:45:37
【问题描述】：

我有这个代码：

<Dropdown
      selectedKey={someKeyInState}
      onChange={(e,option) => {
         // check if the dropdown should be updated
        if(someCondition){
           // update selected key
        }
        else {
           // don't update selected key
        }
      }}
      options={someOptions}
/>

如果满足某个条件，我想阻止更新选定的密钥。
但是，Dropdown 直观地显示了我单击的选项。
如何防止这种行为？

【问题讨论】：

显示你的一些选项？
就是IDropdownOption[]这种类型，只是一个基本的options数组

标签： reactjs office-ui-fabric office-fabric

【解决方案1】：

如果你正在使用 react，你不应该这样做。使用全局状态optionState 并尝试使用条件检查应显示哪个状态以触发使用 onChange 方法。为此。首先提取您的条件检查以分离函数。

myFunction = () => {
   // do conditional check and setState for optionState
}
--------------------------
onChange={myFunction}

然后当你从选项状态中选择弹出键和值并更新到 selectedState 时，现在 react 会自动更新状态和 UI

【讨论】：

【解决方案2】：

问题是我selectedKey 的状态是undefined，它没有被选中。当您传入undefined 时，您基本上是在告诉fabric 自己控制selectedKey 状态。

我通过传递 null 而不是 undefined 进行了修复。这使得 Dropdown 完全受控。

【讨论】：