How to get selected value on Dropdown component in office-ui-fabric-react?

Question

I am trying to use office-ui-fabric-react with my project. But I stucked when controlling select input. I want to get selected item's value on OnChange event. But there's no value on event.target. This seems div so it has only textContent. Am I have to use ref? But I am not happy when I use ref because I believe it is not react-way.

Library: https://developer.microsoft.com/en-us/fabric#/controls/web/dropdown

  <Dropdown
      label={'Dropdown'}
      onChange={e => {
          // Not working.
          console.log(e.target.value)
      }}
      options={[
          { text: 'A', key: 'keyA'}, 
          { text: 'B', key: 'keyB'}
      ]}
   />

1. Is there any solution that without using ref?

2. If I have to use ref how should I do it?

Inhabiter

Answer 1

OMG.. I should read document carefully there's second param.

<Dropdown
      label={'Dropdown'}
      onChange={(e, selectedOption) => {
          // Now I can access with `selectedOption`
      }}
      options={[
          { text: 'A', key: 'keyA'}, 
          { text: 'B', key: 'keyB'}
      ]}
   />

Inhabiter

Thank you for reading the documentation carefully for all of us that find our way here :D – Canice

Where did you see it in the documentation? – Neutral

@OferGal developer.microsoft.com/en-us/fluentui#/controls/web/… (event: React.FormEvent<HTMLDivElement>, option?: IDropdownOption, index?: number) => void – Mating