CODEWITHSUNDEEP
reactjsoffice-ui-fabricoffice-ui-fabric-react
ton1
ton1

Reputation: 7628

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

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?

Upvotes: 5

Views: 10440

Answers (1)

ton1
ton1

Reputation: 7628

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'}
      ]}
   />

Upvotes: 11

Related Questions