获取 parent 的数据集，同时单击 child

Question

我有以下代码，其中我有一个带有 data 属性的按钮，里面有 div，我想获取按钮的数据集，无论目标有多深child.

里面

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 内部单击时，我的控制台给出未定义，但如果我单击按钮，它给出我的 data 属性。

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

是否有任何通用的方法来获取我的按钮的数据集？

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

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

Answer 2

可以使用目标的parentElement属性

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

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

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

Answer 3

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

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

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

获取 parent 的数据集，同时单击 child

Get dataset of parent, while clicking on child

html

javascript

dataset

reactjs