How To Use Onchange Method In Semantic React Dropdown

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: Synthet

Solution 1:

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

1. The native event

2. 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' },
]

classAppextendsReact.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><DropdownbuttonclassName='icon'fluidlabeledicon='world'options={languageOptions}searchtext={searchQuery}searchQuery={searchQuery}value={selected}onChange={this.onChange}onSearchChange={this.onSearchChange}
        /></div>
    );
  }
}

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

<linkhref="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css"/><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/semantic-ui-react@0.77.1/dist/umd/semantic-ui-react.min.js"></script><divid="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)

Solution 2:

I have implemented as below

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

constRenderDropdown = ({optionsArray}) => {

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

   return (
     <Dropdownplaceholder='Please select'fluidselectionoptions={optionsArray}onChange={handleOnChange}
      />
   );
}

options array as below

constoptionsArray= [
  {
    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' },
  }
]

Solution 3:

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.

Solution 4:

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><DropdownonChange={this.onChangeFollower}placeholder='Select Member'fluidsearchselectionoptions={arr} /><h2>List of members</h2>
        {lr}

      </div>
    )
}