我正在映射来自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>标签也是如此。
className='one'
className='two'
<span>
<p>
基本上,onClick在单击不同的html元素时返回一个不同的目标。
预期结果:
单击父div或该div内的任何位置,都应始终返回父div的id属性的值。
问题是当您onClick在topMost父项上定义时,您需要使用e.currentTarget.id而不是,e.target.id因为e.target它将为您提供您单击的元素,而不是onClick定义了侦听器的父项
onClick
topMost
e.currentTarget.id
e.target.id
e.target
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>