How to use onChange method in semantic react dropdown

Question

Can someone help me out how to use onChange in dropdown (Semantic UI React). I am reading the docs, but still, I don't get it. It does have onChange props.

onChange(event: SyntheticEvent, data: object)

How do I use it? Like, I have method dropdownmethod().

edit - implemented the suggestion, but it didn't work. I think in your suggestion, you didn't bind the function. But, I bind the function.

  onChangeFollower(event,data){

    console.log("on change follower",data.text)

  }

  render() {
    console.log("this.props",this.props)
    var onChangeFollower = this.onChangeFollower.bind(this)

    return (
      <div>
        <h2>project settings are here</h2>
        <h2>Add new Member</h2>

        <Dropdown onChange={onChangeFollower}
        placeholder='Select Member'
        fluid search selection options={arr} />

        <h2>List of members</h2>
        {lr}

      </div>

score 17 · Answer 1 · edited Apr 26 '19 at 19:38

As stated in the docs, you just need to pass a reference of your method and then you will get 2 parameters:

The native event
The object of the option selected

Here is a running example

Here is a code snippet (it uses a CDN but throws some debug warnings, so ignore them)

const { Dropdown } = semanticUIReact;

const languageOptions = [
  { key: 'eng', text: 'English', value: 'eng' },
  { key: 'spn', text: 'Spanish', value: 'spn' },
  { key: 'rus', text: 'Russian', value: 'Russian' },
]

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      searchQuery: '',
      selected: null
    }
  }

  onChange = (e, data) => {
    console.log(data.value);
    this.setState({ selected: data.value });
  }

  onSearchChange = (e, data) => {
    console.log(data.searchQuery);
    this.setState({ searchQuery: data.searchQuery });
  }

  render() {
    const { searchQuery, selected } = this.state;
    return (
      <div>
        <Dropdown
          button
          className='icon'
          fluid
          labeled
          icon='world'
          options={languageOptions}
          search
          text={searchQuery}
          searchQuery={searchQuery}
          value={selected}
          onChange={this.onChange}
          onSearchChange={this.onSearchChange}
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui-react@0.77.1/dist/umd/semantic-ui-react.min.js"></script>
<div id="root"></div>

Edit
As a followup to your comment.

I checked example. Even there when i type something, it doesnt show me anything in console

You are not talking about onChange of the select you are talking about when the search input has changed.
You can use onSearchChange with same parameters. (I've updated the example)

well, it didnt work. I have updated the thread. I binded the function . But, nothing happens when i input text in dropdown. — Ankur Sharma, Jan 02 '18 at 17:09
I checked example. Even there when i type something, it doesnt show me anything in console — Ankur Sharma, Jan 02 '18 at 17:26
@AnkurSharma check my update. i thought you want to log on each optioned selected, not search input changed. — Sagiv b.g, Jan 02 '18 at 18:20

score 6 · Answer 2 · answered Apr 28 '19 at 11:07

I have implemented as below

React hooks function is as below , if you prefer you can pass handleOnChange as a prop as well

const RenderDropdown = ({optionsArray}) => {

   const handleOnChange = (e, data) => {
      console.log(data.value);
   }

   return (
     <Dropdown
        placeholder='Please select'
        fluid
        selection
        options={optionsArray}
        onChange={handleOnChange}
      />
   );
}

options array as below

const optionsArray = [
  {
    key: 'male',
    text: 'Male',
    value: 'male',
    image: { avatar: true, src: 'https://semantic-ui.com/images/avatar/small/elliot.jpg' },
  },
  {
    key: 'female',
    text: 'Female',
    value: 'female',
    image: { avatar: true, src: 'https://semantic-ui.com/images/avatar/small/stevie.jpg' },
  }
]

My question is, how can you have access in the image property in the handleOnChange function? If someone wants access to more properties and not only value, how is this possible? — Konstantinos Lamogiannis, Nov 24 '20 at 15:36
edit on my question above, if the question arise for someone else, just have an object value with several properties and then access each object property. — Konstantinos Lamogiannis, Nov 24 '20 at 16:11

score 2 · Answer 3 · answered Jul 09 '19 at 22:12

use onChange event to detect the changes in the dropdown list

onSearchChange={(e, v) => {
        changeMethod(e, v)
}}

use onSearchChange event to detect the search input

  onSearchChange={(e, v) => {
           searchMethod(e, v)
    }}

and you have to define searchMethod and changeMethod as consts in the top of your page.

score 1 · Answer 4 · answered Jan 02 '18 at 17:47

Below is the working code of your's:

onChangeFollower(event, data){
    console.log("on change follower",data.text)
  }

render() {
    console.log("this.props",this.props)
    return (
      <div>
        <h2>project settings are here</h2>
        <h2>Add new Member</h2>

        <Dropdown onChange={this.onChangeFollower}
        placeholder='Select Member'
        fluid search selection options={arr} />

        <h2>List of members</h2>
        {lr}

      </div>
    )
}

How to use onChange method in semantic react dropdown

4 Answers4

Linked