javascript 如何在语义反应下拉列表中使用 onChange 方法

How to use onChange method in semantic react dropdown

提问by Ankur Sharma

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 (Semantic UI React)。我正在阅读文档，但仍然不明白。它确实有 onChange 道具。

onChange(event: SyntheticEvent, data: object)

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

我该如何使用它？就像，我有方法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>

回答by Sagiv b.g

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

如文档中所述，您只需要传递您的方法的引用，然后您将获得 2 个参数：

1. The native event

2. The object of the option selected

1. 本土事件

2. 所选选项的对象

Here is a running example

这是一个运行示例

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

这是一个代码片段（它使用 CDN 但会引发一些调试警告，因此请忽略它们）

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/[email protected]/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 onChangeof the selectyou are talking about when the search input has changed.
You can use onSearchChangewith same parameters. (I've updated the example)

你是不是在谈论onChange对的select，你是在谈论当搜索输入已改变。
您可以使用onSearchChange相同的参数。（我已经更新了示例）

回答by NuOne

I have implemented as below

我已经实现如下

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

React hooks 功能如下，如果您愿意，也可以handleOnChange作为道具传递

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

回答by Ahmed Said Bakheet

use onChange event to detect the changes in the dropdown list

使用 onChange 事件检测下拉列表中的变化

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

use onSearchChange event to detect the search input

使用 onSearchChange 事件检测搜索输入

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

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

并且您必须在页面顶部将 searchMethod 和 changeMethod 定义为常量。

回答by Vinay Chaudhary

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>
    )
}