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

IT技术 javascript reactjs semantic-ui-react
2021-04-26 21:11:31

有人可以帮助我了解如何在下拉菜单中使用 onChange (Semantic UI React)。我正在阅读文档，但仍然不明白。它确实有 onChange props。

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

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

  1. 本土事件

  2. 所选选项的对象

这是一个运行示例

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

显示代码片段

编辑
作为您评论的后续行动。

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

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

我已经实现如下

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

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

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

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

使用 onSearchChange 事件检测搜索输入

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

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

以下是您的工作代码：

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>
    )
}
其它你可能感兴趣的问题
上一篇Redux 状态在窗口重新加载时重置（客户端） 下一篇无法“调整”出我的问题，请帮忙！