尝试获取叠加层以切换重复元素。不能使用 getElementByID

Question

根据标题，我希望在单击图像时触发叠加层，但如果单击叠加层上除 3 个按钮以外的任何地方，我希望它消失。

不幸的是，使用 getElementbyID 将不起作用，因为项目在砌体布局上重复。

    <Masonry
    breakpointCols={breakpointColumnsObj}
    className="my-masonry-grid"
    columnClassName="my-masonry-grid_column">
      
      {this.state.data.map((data) => (
        <div>
          <div className="tilebutton" key=""  style={{width:'100%',position:'relative'}} href={data.URL} >
              <div className="tileoverlay" id="overlay" onClick={overlayoff} onclickout key={data.URL} style={{display:'none',width:'100%',zindex:'2',position:'absolute'}}>
                <a className="button1" href={data.URL} onClick>{data.Name}</a>
                <a className="button2" href={data.CompURL}>{data.Company}</a>
                <a className="button3" href={'instagram.com/'+data.insta}>{data.Company}<img src="\img\Icons\instagram.svg" className='instalogo'/></a>
              </div>
              <img src={data.img} onClick={overlayon} style={{width:'100%'}}/>
          </div>
        </div>
      ))}
    </Masonry>
  )
  
function overlayon() {
  document.getElementById("overlay").style.display = "block";
}

function overlayoff() {
  document.getElementById("overlay").style.display = "none";
}

不幸的是，使用 id“overlay”意味着如果我单击任何版本的砌体，它将触发第一张图像上的叠加。有什么方法可以：

a) 识别被点击的元素，这样它将成为带有切换叠加层的元素

b) 有一个“onclickout”我可以应用到叠加层的按钮

这是我第一次构建 Web 大约 5 天，所以坦率地说，我不知道我在做什么 - 任何帮助表示赞赏。

提前致谢。

Answer 1

React 中使用的习语不鼓励您直接操作 DOM，除非您正在做一些特殊的事情，例如动画。因此我不推荐“识别被点击的元素”。

话虽如此，您可以通过调用一些 setSate 函数来操作数据并相应地触发重绘（在下面的示例中，我定义了一个 setShouldShowOverlay，当调用，将导致重绘）。

我建议你把this.state.data.map()里面的代码拉出来放到它自己的组件里，像这样：

import React, { useState } from 'react';

function Data({ data }) {
  const [ shouldShowOverlay, setShouldShowOverlay ] = useState(false);

  return (
    <div>
      <div className="tilebutton" key=""  style={{width:'100%',position:'relative'}} href={data.URL} >
          <div className="tileoverlay" id="overlay" onClick={() => { setShouldShowOverlay(false); }} onclickout key={data.URL} style={{display:'none',width:'100%',zindex:'2',position:'absolute'}}>
            <a className="button1" href={data.URL} onClick>{data.Name}</a>
            <a className="button2" href={data.CompURL}>{data.Company}</a>
            <a className="button3" href={'instagram.com/'+data.insta}>{data.Company}<img src="\img\Icons\instagram.svg" className='instalogo'/></a>
          </div>
          <img src={data.img} onClick={() => {
            setShouldShowOverlay(true);
          }} style={{width:'100%'}}/>
      </div>
    </div>
  );
}

最后，像这样更新您的 Masonry 代码：

<Masonry
  breakpointCols={breakpointColumnsObj}
  className="my-masonry-grid"
  columnClassName="my-masonry-grid_column">
    
    {this.state.data.map((data) => (
      <Data data={data} />
    ))}
</Masonry>

尝试获取叠加层以切换重复元素。不能使用 getElementByID

Trying to get an overlay to toggle on a repeating element. Can't use getElementByID

html

reactjs

masonry

create-react-app