如何在Semantic React Dropdown中使用onChange方法

Question

有人能帮我解释一下如何在dropdown（Semantic UI React）中使用onChange吗？我正在阅读文档，但仍然不理解。它确实有onChange属性。

onChange(event: SyntheticEvent, data: object)

我怎么使用它？比如，我有一个名为 dropdownmethod() 的方法。

编辑 - 实现建议，但它没有起作用。我认为在您的建议中，您没有绑定该函数。但是，我已经绑定了该函数。

  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>

- Ankur Sharma

Answer 1

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

1. 原生事件

2. 所选选项的对象

这里有一个运行示例

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>

编辑
作为对您评论的跟进。

我检查了示例。即使在我键入内容时，它也不会在控制台中显示任何内容。

您所说的不是select的onChange，而是当搜索输入发生更改时。
您可以使用相同参数的onSearchChange。（我已更新示例）

- Sagiv b.g

---

好的，它没有起作用。我已经更新了线程。我绑定了函数。但是，当我在下拉菜单中输入文本时，什么也没有发生。 - Ankur Sharma

我检查了示例。即使我输入了一些内容，它也没有在控制台中显示任何东西。 - Ankur Sharma

@AnkurSharma，请查看我的更新。我认为你想要记录每个选项选择，而不是搜索输入的更改。 - Sagiv b.g

Answer 2

我已经按照以下方式实现：

以下是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}
      />
   );
}

以下是选项数组

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

- noone

---

我的问题是，在handleOnChange函数中如何访问图像属性？如果有人想要访问更多的属性而不仅仅是值，这该怎么办？ - Konstantinos Lamogiannis

在我上面的问题中进行编辑，如果其他人有同样的问题，只需创建一个带有多个属性的对象值，然后访问每个对象属性即可。 - Konstantinos Lamogiannis

Answer 3

以下是您的工作代码：

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

- Vinay Chaudhary

Answer 4

使用onChange事件来检测下拉列表中的更改。

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

使用 onSearchChange 事件来检测搜索输入。

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

你需要在页面顶部将searchMethod和changeMethod定义为常量。

- Ahmed Said Bakheet