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

回答1:

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)

回答2:

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

回答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.

回答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>

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

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

      </div>
    )
}

来源：https://stackoverflow.com/questions/48064254/how-to-use-onchange-method-in-semantic-react-dropdown

标签

javascript

reactjs

semantic-ui-react