div的id属性未定义/未在react应用中的onClick上捕获

Question

我正在映射来自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
}

问题：

只要className='one'单击外部div（），控制台就会记录未定义的日志。但是，如果我将id值分配给内部div（className='two'），则只有在内部div的尺寸范围内单击时，它才会记录id的值。<span>和<p>标签也是如此。

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

预期结果：

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

Answer 1

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

class App extends React.Component {
state = {
  lists: [{id: 1}, {id: 2}, {id:3}]
}
render() {
  return (
    <div>
      {this.state.lists.map(list => {
          console.log(list.id)
          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>
        )
       })
       }
    </div>
  )
}

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

}

ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="app"></div>