Search code examples
reactjsoffice-ui-fabricoffice-ui-fabric-react

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?


Solution

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