reactjs - ReactJS- 自定义下拉列表

reactjs - ReactJS- 自定义下拉列表,第1张

我有一个在ECMAScript 6中有嵌套ul的下拉列表。

下拉列表的相关代码:

 ......
   handleItemClicked(item){
     alert(item)
  }

   render(){
     return(
              ....
            <UnorderedList whenItemClicked={this.handleItemClicked} />
              ....
    )
}

无序列表的相关代码:

    return(
        <ul>
           ....
            {this.props.dropItems.map(function(item){
                return (<li onClick={this.props.whenItemClicked(item)} key={item}><a>{item}</a></li>)
            }, this)}
        </ul>
    )

结果:

但是,没有错误,当加载页面时,警报事件立即启动并循环播放数组中的每个项目。并点击&lt; li>之后不会产生警报事件。

我想要的是警报发生,而不是页面加载,而是每个相应的&lt; li>单击,仅用于项目的名称,而不是整个数组中的名称。

任何想法?

更新

谢谢crob,解决方案:

  return (<li onClick={this.props.whenItemClicked.bind(this, item)} style={listItemStyle} key={item}><a>{item}</a></li>)

最佳答案:

1 个答案:

答案 0 :(得分:1)

您正在传递onClick={this.props.whenItemClicked(item)},它正在设置onclick到由函数whenItemClicked评估的内容,而不是实际函数。这是导致警报的原因。

要解决此问题,您可以将函数调用绑定到该项目。

onClick={this.props.whenItemClicked.bind(this, item)}

但是,或许更好的解决方案是创建一个新组件来表示列表项,并将whenItemClicked函数传递给它。

ListItem = React.createClass({
  handleClick: function() {
      this.props.onClick(this.props.item);
  },

  render: function() {
    return <li onClick={this.handleClick}>{item}</li>;
  }
})

然后你的地图就像

return <ListItem onClick={this.props.whenItemClicked} item={item} />

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复