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

Question

有人可以帮助我了解如何在下拉列表中使用 onChange（语义 UI React）。我正在阅读文档，但我仍然不明白。它确实有 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 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

1. 本机事件

2. 所选选项的对象

这是一个运行示例

这是一个代码片段（它使用 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/semantic-ui-react@0.77.1/dist/umd/semantic-ui-react.min.js"></script>
<div id="root"></div>

编辑

作为您评论的后续。

我检查了例子。即使在那里，当我输入一些东西时，它也不会在控制台中显示任何内容

您不是在谈论 onChange 的 select 您是在谈论搜索输入何时更改。

您可以使用具有相同参数的 onSearchChange 。 （我已经更新了示例）

原文由 Sagiv b.g 发布，翻译遵循 CC BY-SA 4.0 许可协议