Get selected value of fabric dropdown

Question

I want to get value of selected dropdown in my Visacontact() function, below is my code:

  <Fabric className={styles.matrix2}>
    <VirtualizedComboBox
      styles={comboBoxStyles}
      allowFreeform
      autoComplete="on"
      options={this.state.ddlbookcountry}
      dropdownMaxWidth={200}
      useComboBoxAsMenuWidth
      defaultValue="Please select Key"
    />
  </Fabric>
<input className={styles.button} type='Button' value="Visa Contact" onClick={()=>{this.VisaContact()}}></input>

Answer 1

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:

1. IComboBoxProps interface - onChange
2. 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}
    />
  );
};