Javascript 分区'；s id属性未定义/在react应用程序中单击时未捕获

我正在映射来自api响应的数据，并从中呈现多个div。除此之外，我还在响应中为每个div的id属性分配一个唯一的id，如下所示：

...lists.map(list => {
  return (
  <div className='one' key={list.id} id={list.id} onClick={this.handleClick}>
    <div className='two'>
      <p>Hello World</p>
      <span>Foo Bar</span>
    </div>
  </div>
)
})

handleClick = (e) => {
  console.log(e.target.id)
  // other stuff
}

…lists.map（list=>{
返回(
你好，世界

富吧
)
})
handleClick=（e）=>{
console.log（e.target.id）
//其他东西
}

问题：

每当单击外部div（

className='one'

）时，控制台日志都未定义。但是，如果我将id值指定给内部div（

className='two'

），则仅当在内部div的维度内单击时，才会记录id的值。

和

标记的情况也是如此

基本上，onClick在单击不同的html元素时返回不同的目标

预期结果：

---

单击父div或该div内的任何位置都应始终返回父div的id属性值。

尝试将事件设置为函数参数

handleClick = (e) => {
  console.log(e.target.id)
  // other stuff
}

---

如果您已经在使用ES6

我会稍微修改一下代码，这样就更容易理解

事件

目标和属性，并且不会出现特殊问题

lists.map(list => {
    return (
       <div 
           className='one' 
           key={list.id} 
           onClick={this.handleClick.bind(this, list.id)

           <div className='two'>
             <p>Hello World</p>
             <span>Foo Bar</span>
           </div>
       </div>
    )
 })

 handleClick = (listId) => {
   console.log(listId)
   // other stuff
 }

lists.map（list=>{
返回(
{
console.log（listId）
//其他东西
}

---

正如您在这里看到的，我只需使用列表id调用该方法，我在构造函数中完成了，只需将这一行：

constructor() {
     this.handleClick = this.handleClick.bind(this);
}

在此之后，您将能够访问元素的引用

有关更多详细信息，请访问此链接：

---

问题是，当您在

最上面的
父项上定义
onClick
时，您需要使用
e.currentTarget.id
而不是
e.target.id
，因为
e.target
将为您提供单击的元素，而不是定义
onClick
侦听器的父项


类应用程序扩展了React.Component{
状态={
列表：[{id:1}，{id:2}，{id:3}]
}
render（）{
返回(
{this.state.lists.map（list=>{
console.log（list.id）
返回(
你好，世界

富吧
)
})
}
)
}
handleClick=（e）=>{
console.log（e.currentTarget.id）
//其他东西
}
}
ReactDOM.render（，document.getElementById（'app'）；
好的，问题不是Reactjs，而是事件目标

当您必须使用
event.currentTarget
时，您正在使用
e.target
，区别如下


target
是触发事件的元素（例如，用户单击）
currentTarget
是事件侦听器附加到的元素

让我们在一个例子中看到这一点：


let tacos=[{
人物：“约翰”，
成分：鳄梨酱
}, {
人物：“莎莉”，
配料：“牛肉”
}];
类应用程序扩展了React.Component{
render（）{
返回(
玉米卷目录：
);
}
}
类tacoList扩展了React.Component{
建造师（道具）{
超级（道具）；
this.handleClick=this.handleClick.bind（this）；
}
handleClick（事件）{
const currentTarget=event.currentTarget；
console.log（event.target）；
console.log（currentTarget.id）；
}
render（）{
返回(
{this.props.tacos.map（（taco，index）=>(
{taco.person}:{taco.component}

))}
);
}
}
ReactDOM.render（，document.getElementById（“根”）；
.one{
填充：20px；
}

我的代码中已经有了它，只是没有把它放在问题中。匿名函数会一直导致重新渲染，因为它会在每次调用此组件时返回一个新引用rendered@JoseAPL现在我删除了匿名函数。我看不出因此而否决它的理由。但是现在它不会重新运行
this.handleClick.bind
也会产生同样的效果，因为您绑定一个新引用，它必须是一个内部函数绑定一次，我这样做是因为这会导致React项目的性能问题！您不应该这样做，因为bind每次都返回一个新函数。请看这个问题，谢谢Shubham，这正是我想要的。也请查看这个答案，这将有助于解决所有问题，我认为这将是正确处理这一问题的最佳解决方案。创建一个单独的组件并将id作为道具传递不仅是一个更干净的解决方案，也是一个有效的解决方案。