如何在office-ui-fabric-react中获取下拉菜单组件的选定值？

Question

我试图在我的项目中使用office-ui-fabric-react，但遇到了控制选择输入时的困难。我想在OnChange事件中获取所选项目的值。但是event.target上没有value。这似乎是div，因此只有textContent。我需要使用ref吗？但是我不喜欢使用ref，因为我认为这不是react-way。

库：https://developer.microsoft.com/en-us/fabric#/controls/web/dropdown

  <Dropdown
      label={'Dropdown'}
      onChange={e => {
          // Not working.
          console.log(e.target.value)
      }}
      options={[
          { text: 'A', key: 'keyA'}, 
          { text: 'B', key: 'keyB'}
      ]}
   />

1. 有没有不使用ref的解决方案？

2. 如果必须使用ref，我应该如何做？

- ton1

Answer 1

天啊.. 我应该仔细阅读文档，那里还有第二个参数。

<Dropdown
      label={'Dropdown'}
      onChange={(e, selectedOption) => {
          // Now I can access with `selectedOption`
      }}
      options={[
          { text: 'A', key: 'keyA'}, 
          { text: 'B', key: 'keyB'}
      ]}
   />

- ton1

---

感谢您仔细阅读这份文档，对于我们所有在这里寻找答案的人来说，这非常重要 :D - ejx

你在文档中哪里看到它的？ - Ofer Gal

(event: React.FormEvent<HTMLDivElement>, option?: IDropdownOption, index?: number) => void - Zhiyong