Javascript 从呈现列表中获取已单击元素的id

从列表中单击的元素获取id的最佳方法是什么？ 我试图呈现项目列表，然后为单击的项目显示项目详细视图

e、 g

render（）{
let list=data.map（（obj）=>{
返回
});
返回{list}；
}

---

如何获取已单击元素的id以便在其他组件中使用？

在

onClick

方法中传递每个元素的id：

render() {
    let list = data.map((obj) => {
       return <div key={obj.id} id={obj.id} onClick={() => this.handleClick(obj.id)}></div>         
    }
    return <div>{list}</div>;
}

handleClick(id){
   console.log(id);
}

render（）{
let list=data.map（（obj）=>{
返回此.handleClick（obj.id）}>
}
返回{list}；
}
handleClick（id）{
console.log（id）；
}

您可以直接从

单击事件中获取
id
。无需将变量绑定到事件处理程序

render() {
    let list = data.map((obj) => {
       return <div key={obj[id]} id={obj[id]} onClick={this.handleClick}></div>         
    }
    return <div>{list}</div>;
}

handleClick(e){
   console.log(e.target.id);
}

render（）{
let list=data.map（（obj）=>{
返回
}
返回{list}；
}
handleClick（e）{
console.log（e.target.id）；
}


一个稍加修改的工作示例：


MyApp类扩展了React.Component{
handleClick（e）{
console.log（e.target.id）；
}
render（）{
设数据=[0,1,2,3,4]；
let list=data.map（（obj，id）=>{
返回{obj}
});
返回{list}
}
}
ReactDOM.render（，document.getElementById（“myApp”）；

OMG，你真是个天才。我在这个尝试性的事件、Submit和forms上浪费了太多的时间。那些快速阅读的人注意到onClick处理程序不像往常那样直接是一个函数，而是一个用id调用handleClick的arrow函数。伙计们记住，如果e.target.id不适合你（它找不到id）然后使用currentTarget，使其成为e.currentTarget.id

render() {
    let list = data.map((obj) => {
       return <div key={obj[id]} id={obj[id]} onClick={this.handleClick}></div>         
    }
    return <div>{list}</div>;
}

handleClick(e){
   console.log(e.target.id);
}