javascript - 如何单击ReactJS包装元素？

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

在以下情况下，单击“ yo”日志undefined；单击“ yo”和“ lip”日志之间的空格1；然后单击“嘴唇”日志undefined。

我希望所有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>
    )
  }
}

CodeSandbox Demo

最佳答案

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

docs for e.currentTarget state：


  在事件遍历DOM时，标识事件的当前目标。它始终引用事件处理程序已附加到的元素，而不是event.target，后者标识发生事件的元素。


这是a fork of your codesandbox using e.currentTarget。

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

关于javascript - 如何单击ReactJS包装元素？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47986612/