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>