You cannot directly access the selected value from combo box control in other function. First, you need to store the selected value in state
variable using onChange
of combo box selection.
Example:
<VirtualizedComboBox
styles={comboBoxStyles}
allowFreeform
autoComplete="on"
options={this.state.ddlbookcountry}
onChange={(e, selectedItem, value) => handleChange(e, selectedItem, value)}
dropdownMaxWidth={200}
useComboBoxAsMenuWidth
defaultValue="Please select Key"
/>
handleChange(e, selectedItem, value) {
let selectedValue = value ? value : selectedItem.text // Set free form entry or selected option text
this.setState({bookCountryValue: selectedValue});
}
This is just an example to show you, how you can save selected option in state.
Then in your VisaContact()
function, you can access the selected value using this.state.bookCountryValue
.
Documentation:
- IComboBoxProps interface - onChange
- ComboBox
Example code from documentation:
import * as React from 'react';
import { ComboBox, IComboBoxOption, IComboBox, SelectableOptionMenuItemType } from 'office-ui-fabric-react/lib/index';
const items: IComboBoxOption[] = [
{ key: 'Header1', text: 'First heading', itemType: SelectableOptionMenuItemType.Header },
{ key: 'A', text: 'Option A' },
{ key: 'B', text: 'Option B' },
{ key: 'C', text: 'Option C' },
{ key: 'D', text: 'Option D' },
{ key: 'divider', text: '-', itemType: SelectableOptionMenuItemType.Divider },
{ key: 'Header2', text: 'Second heading', itemType: SelectableOptionMenuItemType.Header },
{ key: 'E', text: 'Option E' },
{ key: 'F', text: 'Option F', disabled: true },
{ key: 'G', text: 'Option G' },
{ key: 'H', text: 'Option H' },
{ key: 'I', text: 'Option I' },
{ key: 'J', text: 'Option J' },
];
const comboBoxStyle = { maxWidth: 300 };
export const ComboBoxControlledExample: React.FC = () => {
const [selectedKey, setSelectedKey] = React.useState<string | number | undefined>('C');
const onChange = React.useCallback(
(ev: React.FormEvent<IComboBox>, option?: IComboBoxOption): void => {
setSelectedKey(option?.key);
},
[setSelectedKey],
);
return (
<ComboBox
style={comboBoxStyle}
selectedKey={selectedKey}
label="Controlled single-select ComboBox (allowFreeform: T)"
allowFreeform
autoComplete="on"
options={items}
onChange={onChange}
/>
);
};