单击时选择 parent 容器 ID

Question

我想知道是否可以在单击整个 div 的任意位置时始终 select parent 的 ID？

我做了一个示例，给每个 child div 一个不同的 id 和 console.logging 哪个元素 id 被 selected 取决于哪个部分您点击的整个 div。

如上所述，我只想能够始终 select parent div 的 Id，在本例中无论哪一部分都是“1”整个div我点击.

function App() {
  function onClick(e) {
    console.log(e.target.id);
  }

  return (
    <div id="1" className="container" onClick={onClick}>
      Decor
      <div id="2" className="img-container">
        <img
          id="3"
          src="https://images.pexels.com/photos/7828323/pexels-photo-7828323.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
          className="img"
          alt=""
        />
      </div>
      <p id="4">Lorem ipsum</p>
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

body {
  font-family: sans-serif;
  text-align: center;
  display: flex;
  justify-content: center;
}

.container {
  height: 300px;
  width: 200px;
  border: solid green;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.img-container {
  width: 200px;
  height: 200px;
}

img {
  width: 100%;
  height: 100%;
}

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 1

使用“容器”搜索 closest 祖先 class。

function Example() {

  function onClick(e) {
    const { id } = e.target.closest('.container');
    console.log(id);
  }

  return (
    <div id="1" className="container" onClick={onClick}>
      Decor
      <div id="2" className="img-container">
        <img
          id="3"
          src="https://images.pexels.com/photos/7828323/pexels-photo-7828323.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
          className="img"
          alt=""
        />
      </div>
      <p id="4">Lorem ipsum</p>
    </div>
  );
}

ReactDOM.render(
  <Example />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

单击时选择 parent 容器 ID

Selecting parent container id on Click

javascript

onclick

reactjs