react點(diǎn)擊事件

    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íng)論</p></div>
                    </div>
                    <img className="newsimg" src={item.tupian}/>
                </div>
    });

給父div綁定點(diǎn)擊事件，點(diǎn)擊子div卻無(wú)法傳遞newslistid參數(shù)。卻可以打印點(diǎn)擊事件（不過(guò)沒(méi)值了）。
該如何解決。

回答

編輯回答

默念

我猜測(cè)個(gè)方向，e.target和e.currentTarget的區(qū)別。

2017年9月9日 10:17

編輯回答

鹿惑

把onClick={this.newslistclick.bind(this)}改成onClick={this.newslistclick(newslistid)},newslistclick方法返回一個(gè)點(diǎn)擊事件。

  newslistclick = (newslistid) => {
    return e => {
        // 你的業(yè)務(wù)代碼
        // use newslistid do something
    }
  }

2017年5月8日 10:08

編輯回答

兔寶寶

露珠對(duì) bind 的行為理解的不是很深刻。

Function#bind 可以傳遞多個(gè)值的。比如要傳遞當(dāng)前猛擊的項(xiàng)目可以使用如下的源碼

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

這樣一來(lái)，原始傳遞給 newslistclick 事件處理器的 event 將變成第二個(gè)參數(shù)了，第一個(gè)參數(shù)將變?yōu)槲覀兘壎ê髠鬟f的 item

2018年6月16日 05:17