我如何获得用户使用下拉按钮选择的选项进行操作？

Question

我是 React 和 office-ui-fabric 的新手，我正在尝试创建一个 VSCode 扩展接受某些输入参数并根据用户选择的输入，我应该操作在选择的选项上。我在下拉按钮下以选项的形式接受用户输入。目前，一旦用户从下拉列表中选择其中一个选项，我就看不到 dropdown.I 中选择的选项，只看到未定义的显示在控制台中。

我尝试了不同的方法从用户那里获取这个输入参数，但我最终还是在控制台中显示了 undefined。

const Options: IDropdownOption[] = [
        { key: 'A', text: 'A', itemType: DropdownMenuItemType.Header },
        { key: 'B', text: 'B' },
        { key: 'C', text: 'C' },
        ];

const [selectedItem, setOption] = React.useState<string | undefined>(undefined);

return (
        <div>
      <Dropdown placeholder="Select option" options={Options} styles={dropdownStyles} selectedKey={selectedItem} onChange={event =>{
                              setOption((event.target as HTMLInputElement).value);console.log(selectedItem)}}  />   
 )

windows.console 应该显示用户选择的输入，而目前我看到未定义

Answer 1

office-ui-fabric Dropdown 组件通过 onChanged 属性触发更改事件，该属性在被调用时传递用户选择的下拉项下的实际选项对象。

通过将 onChange 更改为 onChanged，然后修改此事件处理程序以读取所选选项的 text（而不是 [=18 的 value =]) 应该产生所需的结果：

<Dropdown placeholder="Select option" 
          options={Options} 
          styles={dropdownStyles} 
          selectedKey={selectedItem} 
          onChanged={ selectedOption =>{
              setOption(selectedOption.text);
              console.log("Selected", selectedOption.text);
          }}/>

更新

这：setOption(selectedOption.text);调用setOption()函数，将用户选择的选项的显示值传递给它。当调用 setOption() 时，这会使用传递的值（即所选选项的显示值）更新组件的 stat selectedItem 状态。请注意，调用 setOption() 的副作用是将发生组件的重新渲染，这意味着 selectedItem 上的组件 displaying/relying 的部分将自动更新，等等

我如何获得用户使用下拉按钮选择的选项进行操作？

How do i get the option selected by a user using the Dropdown button to operate on?

reactjs

typescript

react-hooks

office-ui-fabric