如何点击ReactJS包装元素？

Posted 2021-05-03

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

在下面的例子中，点击“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>
    )
  }
}

另一答案

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