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

Question

我有这个代码：

<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 直观地显示了我单击的选项。
如何防止这种行为？

Answer 1

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

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

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

Answer 2

问题是我的状态selectedKey是undefined什么都没有选择。当您传入时，undefined您基本上是在告诉fabricselectedKey自行控制状态。

我通过传递null而不是undefined. 这使得 Dropdown 完全受控。