Javascript 如何单击ReactJS包装元素？

当我单击一个包装元素时，我希望在该包装元素上触发一个函数。相反，它似乎在最内部的元素上触发

在下面的例子中，单击“yo”记录未定义的

；单击“yo”和“lip”日志之间的空格
1
；并点击“lip”日志
未定义

我希望所有3个都记录
1

import React from 'react';

export default class Foo extends React.Component {
  something = e => {
    e.stopPropagation()
    console.log(e.target.dataset.index)
  }

  render() {
    return (
      <section data-index={1} onClick={this.something} ref={e => { this.section = e }}>
        <h1 style={{ marginBottom: 30 }}>yo</h1>
        <p>lip</p>
      </section>
    )
  }
}

从“React”导入React；
导出默认类Foo扩展React.Component{
某物=e=>{
e、 停止传播（）
console.log（e.target.dataset.index）
}
render（）{
返回(
{this.section=e}}>
哟
嘴唇

)
}
}

通过使用e.currentTarget而不是e.target，您将获得所需的行为

委员会：

当事件遍历DOM时，标识事件的当前目标。它总是指事件处理程序已附加到的元素，而不是标识事件发生所在元素的event.target

这是

从“React”导入React；
导出默认类Foo扩展React.Component{
某物=e=>{
e、 停止传播（）
console.log（e.currentTarget.dataset.index）
}
render（）{
返回(
{this.section=e}}>
哟
嘴唇

)
}
}
通过使用e.currentTarget而不是e.target，您将获得所需的行为

委员会：

当事件遍历DOM时，标识事件的当前目标。它总是指事件处理程序已附加到的元素，而不是标识事件发生所在元素的event.target

这是

从“React”导入React；
导出默认类Foo扩展React.Component{
某物=e=>{
e、 停止传播（）
console.log（e.currentTarget.dataset.index）
}
render（）{
返回(
{this.section=e}}>
哟
嘴唇

)
}
}
从“React”导入React；
导出默认类Foo扩展React.Component{
某物=e=>{
e、 停止传播（）
//console.log（e.target.dataset.index）
console.log（e.currentTarget.dataset.index）
}
render（）{
返回(
{this.section=e}}>
哟
嘴唇

)
}
}
从“React”导入React；
导出默认类Foo扩展React.Component{
某物=e=>{
e、 停止传播（）
//console.log（e.target.dataset.index）
console.log（e.currentTarget.dataset.index）
}
render（）{
返回(
{this.section=e}}>
哟
嘴唇

)
}
}

import React from 'react';

export default class Foo extends React.Component {
  something = e => {
    e.stopPropagation()
    console.log(e.currentTarget.dataset.index)
  }

  render() {
    return (
      <section data-index={1} onClick={this.something} ref={e => { this.section = e }}>
        <h1 style={{ marginBottom: 30 }}>yo</h1>
        <p>lip</p>
      </section>
    )
  }
}

import React from 'react';

export default class Foo extends React.Component {
  something = e => {
    e.stopPropagation()
    //console.log(e.target.dataset.index)
    console.log(e.currentTarget.dataset.index)
  }

  render() {
    return (
      <section data-index={1} onClick={this.something} ref={e => { this.section = e }}>
        <h1 style={{ marginBottom: 30 }}>yo</h1>
        <p>lip</p>
      </section>
    )
  }
}