需要在点击特定列表时显示特定ID

时间:2017-02-11 08:30:03

标签: javascript reactjs

我需要从项目中获取特定信息,例如Id onChlicking 我得到的列表,但我现在面临的是,如果我将(item.Id)作为参数传递给 handleClick ,它将显示项目中的所有Id。这很明显。

那么如何更改我的代码以获取点击特定列表的特定ID?

handleClick(event) {
    console.log(event);
      alert(event);
    }


      <ul  className="w3-ul w3-card-4  w3-yellow">  {this.state.post.map((item, index)=> {
                           return (
                                <Link  to="/displaylist" style={{textDecoration:'none'}} key={index}  >
                                    <li className=" w3-hover-green w3-padding-16" onClick={this.handleClick}>
                                       <img src={require('./3.jpg')} className="w3-left w3-circle w3-margin-right " width="60px" height="auto" />
                                          <span>{item.Firstname}</span><br/><br/>
                                    </li>
                                </Link>

                                  )}
                            )}
          </ul>

1 个答案:

答案 0 :(得分:1)

您可以使用的是:

handleClick(id) {
    return function(event) {
       console.log(id);
    };
}


<ul  className="w3-ul w3-card-4  w3-yellow">  {this.state.post.map((item, index)=> {
    return (
        <Link  to="/displaylist" style={{textDecoration:'none'}} key={index}  >
            <li className=" w3-hover-green w3-padding-16" onClick={this.handleClick(item.id)}>
                <img src={require('./3.jpg')} className="w3-left w3-circle w3-margin-right " width="60px" height="auto" />
                <span>{item.Firstname}</span><br/><br/>
            </li>
        </Link>
        )}
    )}
</ul>

这就是所谓的partial application,所以你初始化传递id的回调,它将返回一个将被执行的函数onClick