下拉onChange方法无法获得fluentui/react-northstar中选择的值

Question

我使用的是fluentui/react-northstar库。我正在使用下拉组件和使用onChange处理程序。我无法从onChangeHandler方法中的下拉菜单中获取当前选择的值。

我的代码片段

import React from "react";
import { Flex, Header, Dropdown } from '@fluentui/react-northstar';
class DropdownComponent extends React.Component {
    constructor(props) {
        super(props);
this.state = {
inputItems: [
'Robert Tolbert',
'Wanda Howard',
'Tim Deboer',
'Amanda Brady',
'Ashley McCarthy',
'Cameron Evans',
'Carlos Slattery',
'Carole Poland',
'Robin Counts',
]
}
this.onChangeHandler = this.onChangeHandler.bind(this);
    }
onChangeHandler(e){
//e => null
//Need to get the selected value from dropdown
}
    render() {
      return (
         <section>
<Flex column gap="gap.small">
<Header as="h4" content="Object" />
<Dropdown
items={this.state.inputItems}
placeholder="Select your object"
checkable 
onChange={(e) => this.onChangeHandler(e)}
/>
</Flex>
</section>
      );
    }
}
export default DropdownComponent;

谁能详细说明如何从onChange处理程序中获取所选值?

Answer 1

根据@fluentui/react-northstar@0.59.0文档，从下拉菜单中选择的值被传递或在回调函数的第二个参数中提供。

。E，通过以下更改，它将工作

onChangeHandler(_, event) {
console.log("selected value from dropdown ", event.value);
}

和

<Dropdown
items={this.state.inputItems}
placeholder="Select your object"
checkable
onChange={this.onChangeHandler}
/>

工作示例可以在这里找到，https://codesandbox.io/embed/lingering-sound-q2rw2?fontsize=14&hidenavigation=1&theme=dark