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}
/>

我想在满足特定条件时阻止更新所选键。
但是，下拉菜单直观地显示了我点击的选项。
我该如何防止这种行为？

Answer 1

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

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

然后当你select从选项状态弹出键和值并更新到selectedState，现在反应自动更新状态和UI

Answer 2

问题是我 selectedKey 的状态是 undefined，没有选择任何内容。当你传入 undefined 时，你基本上是在告诉 fabric 自己控制 selectedKey 状态。

我通过传递 null 而不是 undefined 来修复。这使得下拉菜单完全受控。

Office UI Fabric React - 下拉列表不考虑 selectedKey 道具

Office UI Fabric React - Dropdown not respecting selectedKey prop

reactjs

office-ui-fabric

office-fabric