I am using fluentui/react-northstar library. I am using the dropdown component and using the onChange handler. I am unable to get the current selected value from the dropdown in the onChangeHandler method.
My code snippet
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;
Can someone provide details on how to get the selected value from the onChange handler.
As per @fluentui/[email protected]
documentation, the selected value from dropdown is being passed or provided in callback function second argument.
i.e, with the following changes, it will work
onChangeHandler(_, event) {
console.log("selected value from dropdown ", event.value);
}
and
<Dropdown
items={this.state.inputItems}
placeholder="Select your object"
checkable
onChange={this.onChangeHandler}
/>
The working example can be found here, https://codesandbox.io/embed/lingering-sound-q2rw2?fontsize=14&hidenavigation=1&theme=dark