获取父数据集，同时单击子答案

【问题标题】：Get dataset of parent, while clicking on child获取父数据集，同时单击子
【发布时间】：2022-01-17 04:39:54
【问题描述】：

我有以下代码，其中我有一个带有data 属性的按钮和其中的div，我想获取按钮的数据集，无论孩子内部的目标有多深。

export default function App() {
  const handler = (e) => {
    console.log(e.target.dataset.id);
  };
  return (
    <div className="App">
      <button
        data-id="myDataId"
        onClick={handler}
        style={{ 
          height: 200, 
          width: 200, 
          backgroundColor: "green" 
        }}
      >
        Bruh
        <div
          style={{
            height: 100,
            width: 100,
            backgroundColor: "red"
          }}
        />
      </button>
    </div>
  );
}

在这个例子中，当我点击 div 内部时，我的控制台给出了 undefined，但如果我点击到按钮，它会给出我的 data 属性。

我尝试使用event.path，但没有给出任何结果。

有什么通用方法可以获取我的按钮的数据集吗？

这是完整的示例：https://codesandbox.io/s/lucid-breeze-e1lh2?file=/src/App.js:23-535

【问题讨论】：

您可能需要两个不同的点击处理程序。一个用于父元素，另一个用于子元素。在子处理程序中，您可以使用它来获取父级的数据属性 - e.target.parentNode.dataset.id
嗯，还有其他通用的方法吗？
点击按钮时我没有得到你需要控制台的问题？
@SachinYadav 不，我需要控制台 data-id 的内容，在这种情况下它是“aaaaaa”：D
让我改成正常的名字

标签： javascript html reactjs dataset

【解决方案1】：

import "./styles.css";
import {useRef} from 'react'
export default function App() {
  const myContainer = useRef(null);
  const handler = (myContainer) => {
    console.log(myContainer.current.closest(".parent").getAttribute("data-id"))
  };

  return (
    <div className="App">
      <button
        data-id="aaaaaaa"
        className = "parent"
        onClick={() => handler(myContainer)}
        style={{ height: 200, width: 200, backgroundColor: "green" }}
      >
        Bruh
        <div
        ref={myContainer}
          style={{
            height: 100,
            width: 100,
            backgroundColor: "red"
          }}
        />
      </button>
    </div>
  );
}

【讨论】：

是的，它适用于这种特殊情况，但有没有办法做到这一点，例如 5 个嵌套元素深？
我已经编辑了答案，请检查

【解决方案2】：

问题是我应该从 currentTarget 而不是 target 获取数据集。

区别在于target来自执行点击的确切元素，而currentTarget是设置onClick的元素。

const handler = (e) => {
  console.log(e.currentTarget.dataset.id); // instead of e.target
};

【讨论】：

【解决方案3】：

您可以使用目标的parentElement 属性。

如果您不知道目标可能有多深，您可以遍历祖先，直到找到它。有一个例子：

const handler = (e) => {
  let target = e.target
  while (target && target.tagName != 'BUTTON') target = target.parentElement

  console.log(target?.dataset.id)
}

【讨论】：

对不起，这个不稳定，会导致死循环：/
我刚刚编辑了代码以提供更具体和稳定的答案。