Reactjs 如何让用户使用下拉按钮选择要操作的选项？

我不熟悉react和office ui fabric，我正在尝试创建一个VSCode扩展，该扩展采用某些输入参数，根据用户选择的输入，我应该在所选的选项上进行操作。我以下拉按钮下选项的形式接受用户输入。目前，一旦用户从下拉列表中选择一个选项，我看不到下拉列表中选择的选项。我只看到控制台中显示未定义的选项

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

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

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

const选项：idropdownpoption[]=[
{key:'A'，text:'A'，itemType:DropdownMenuItemType.Header}，
{键：'B'，文本：'B'}，
{键：'C'，文本：'C'}，
];
const[selectedItem，setOption]=React.useState（未定义）；
返回(
{
setOption（（event.target作为HTMLInputElement.value）；console.log（selectedItem）}/>
)                          

---

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

office ui结构
下拉列表
组件通过prop触发更改事件，该prop在调用时传递用户选择的下拉项下的实际选项对象

通过将
onChange
更改为
onChanged
，然后修改此事件处理程序以读取所选选项（而不是
事件的
值
）的
文本，应生成所需结果：

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

{
setOption（selectedOption.text）；
console.log（“Selected”，selectedOption.text）；
}}/>   

更新

这：
setOption（selectedOption.text）
调用
setOption（）
函数，并将用户选择的选项的显示值传递给它。调用
setOption（）
时，将使用传递的值（即所选选项的显示值）更新组件的stat
selectedItem
状态。请注意，调用
setOption（）
的一个副作用是会重新呈现组件，这意味着显示/依赖
selectedItem
的组件部分将自动更新，等。
office ui fabric
下拉列表
组件通过属性触发更改事件，该属性在调用时传递用户已选择的下拉列表项下的实际选项对象

通过将
onChange
更改为
onChanged
，然后修改此事件处理程序以读取所选选项（而不是
事件的
值
）的
文本，应生成所需结果：

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

{
setOption（selectedOption.text）；
console.log（“Selected”，selectedOption.text）；
}}/>   

更新

这：
setOption（selectedOption.text）
调用
setOption（）
函数，并将用户选择的选项的显示值传递给它。调用
setOption（）
时，将使用传递的值（即所选选项的显示值）更新组件的stat
selectedItem
状态。请注意，调用
setOption（）
的一个副作用是会重新呈现组件，这意味着显示/依赖
selectedItem
的组件部分将自动更新，等等。
感谢您的回复！将onChange更改为onChanged并修改事件处理程序将在控制台日志中显示[object object]，而不是选项“A”或“B；”中的任何一个。不客气：）-刚刚更新了答案。那有用吗？谢谢！这起作用了。你能帮我理解这一行做什么吗selectedOption=>{setOption（selectedOption.text）；？@novel_coder不客气，只是扩展了答案-希望有帮助：）谢谢你的回复！将onChange更改为onChanged并修改事件处理程序显示[object object]在控制台日志中，而不是选项“A”或“B；”中的任何一个。不客气：）-只是更新了答案。这有帮助吗？谢谢！这很有效。你能帮我理解这行内容吗selectedOption=>{setOption（selectedOption.text）；？@Noveler\u coder不客气，只是扩展了答案-希望有帮助：）