react点击事件

Question

    listEle = this.state.newsList.map((item,value) => {
        return <div className="Component-news-list" key={item.newsId} data-newslistid={item.newsId} onClick={this.newslistclick.bind(this)} >  
                    <div>
                    <div className='userimg'>{item.biaoti}</div>
                <div className='Component-news-list-p'>    <p>{item.author}&nbsp;&nbsp;&nbsp;{item.collect_num}评论</p></div>
                    </div>
                    <img className="newsimg" src={item.tupian}/>
                </div>
    });

给父div绑定点击事件，点击子div却无法传递newslistid参数。却可以打印点击事件（不过没值了）。
该如何解决。

Answer 1

我猜测个方向，e.target和e.currentTarget的区别。

Answer 2

把onClick={this.newslistclick.bind(this)}改成onClick={this.newslistclick(newslistid)},newslistclick方法返回一个点击事件。

  newslistclick = (newslistid) => {
    return e => {
        // 你的业务代码
        // use newslistid do something
    }
  }

Answer 3

露珠对 bind 的行为理解的不是很深刻。

Function#bind 可以传递多个值的。比如要传递当前猛击的项目可以使用如下的源码

class Com extends React.Comonent {
    ...
    
    newslistclick = (item, event) => {
        //    ...
    }
    
    render() {
        const listEle = this.state.newsList.map(item => (
            <div 
                key={item.newsId} 
                className="Component-news-list"
                onClick={this.newslistclick.bind(this, item)}
            >
                {/* ... */}
            </div>
        ));
    }
}

这样一来，原始传递给 newslistclick 事件处理器的 event 将变成第二个参数了，第一个参数将变为我们绑定后传递的 item