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

Question

有人可以帮我解决如何在下拉列表中使用onChange（语义UI反应）。 我正在阅读文档，但是，我仍然没有得到它。 它确实有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>

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 。 （我已经更新了这个例子）

Answer 2

我已经实现如下

React hooks函数如下所示，如果您愿意，也可以将handleOnChange作为prop传递

const RenderDropdown = ({optionsArray}) => {

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

   return (
     <Dropdown
        placeholder='Please select'
        fluid
        selection
        options={optionsArray}
        onChange={handleOnChange}
      />
   );
}

options数组如下

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

Answer 3

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

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

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

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

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

Answer 4

以下是您的工作代码：

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