时间戳

首页 > 解决方案 > React Semantic-ui如何处理带有附加参数的下拉onclick

reactjs - React Semantic-ui如何处理带有附加参数的下拉onclick

问题描述

我正在使用反应语义 ui 下拉菜单，并希望在我的下拉菜单上处理 onclick 事件。考虑我有这个方法来处理 

handleClick = (e, {value }) => this.setState({id: value })

然后我可以用这个打电话

 <Dropdown
     selection
     options={myOptions}
     placeholder='I change value on keyboard navigation'
     onClick={this.handleClick} />

但在某些情况下我想用附加参数调用handleClick，我试过这个

<Dropdown
     selection
     options={myOptions}
     placeholder='I change value on keyboard navigation'
     onClick={this.handleClick.bind(this,idx)} />

并将我的处理程序更改为handleClick = (e, {value },idx) => this.setState({id: value })但它似乎不起作用。我在做什么错或有什么建议？

标签： reactjssemantic-uisemantic-ui-react

解决方案

我认为这部分没有像这样执行

onClick={this.handleClick.bind(this,idx)}

应该改成这个

onClick={(idx) => this.handleClick.bind(this,idx)}

在 React 中，当我们必须在 click 上使用函数传递参数时，我们必须像上面一样添加箭头符号。如果此帮助对您不起作用，那么我认为您必须更改绑定然后以下代码将为您提供帮助

改成onClick={this.handleClick.bind(this,idx)}这个

onClick={(e, e.target.value, idx) => this.handleClick(e, e.target.value, idx)}

也改变

handleClick = (e, {value },idx) => this.setState({id: value })

对此

handleClick = (e, value, idx) => this.setState({id: value })

推荐阅读