4

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?

ton1
  • 7,238
  • 18
  • 71
  • 126

1 Answers1

11

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'}
      ]}
   />
ton1
  • 7,238
  • 18
  • 71
  • 126
  • 5
    Thank you for reading the documentation carefully for all of us that find our way here :D – ejx May 20 '20 at 04:38
  • Where did you see it in the documentation? – Ofer Gal Mar 14 '21 at 19:07
  • @OferGal https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown#implementation (event: React.FormEvent, option?: IDropdownOption, index?: number) => void – Zhiyong Mar 19 '21 at 17:53