小编典典

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

reactjs

我正在映射来自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属性的值。


阅读 390

收藏
2020-07-22

共1个答案

小编典典

问题是当您onClicktopMost父项上定义时,您需要使用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>
2020-07-22