javascript - 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
}

问题:

每当单击外部 div ( className='one') 时，控制台都会记录未定义。但是，如果我将 id 值分配给内部 div ( className='two' )，它会记录 id 的值仅当在内部 div 的尺寸内进行点击时。 <span> 也是如此和 <p>标签。

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

预期结果:

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

Answer 1

当你在 topMost 父级上定义 onClick 时，你需要使用 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>