时间戳

首页 > 解决方案 > 检查哪个元素在 React 中悬停

reactjs - 检查哪个元素在 React 中悬停

问题描述

我正在使用 Gatsby + Wordpress 为我构建投资组合网站。我想知道是否可以悬停投资组合项目的名称和与之相关的图像？

我知道如果PortfolioItemNameLink悬停它会显示来自同一项目的图像。如何检查悬停的项目？

const PortfolioItemsText = () => {

  return (
    <StaticQuery
      query={graphql`
        {
          allWordpressWpPortfolio {
            edges {
              node {
                id
                slug
                title
                excerpt
                content
                featured_media {
                  source_url
                }
              }
            }
          }
        }
      `}
      render={props => (
        <Wrapper>
          <PortfolioImageWrapper>
            {props.allWordpressWpPortfolio.edges.map(edge => (
              <PortfolioImage
                src={edge.node.featured_media.source_url}
                alt="Thumbnail"
              />
            ))}
          </PortfolioImageWrapper>

          <PortfolioItemsWrapper>
            <PortfolioItems>
              {props.allWordpressWpPortfolio.edges.map(portfolioItem => (
                <PortfolioItem
                  style={currentStyle}
                  key={portfolioItem.node.id}
                >
                  <PortfolioItemNameLink
                    to={`/portfolio/${portfolioItem.node.slug}`}
                  >
                    <PortfolioItemNameLinkText>
                      {portfolioItem.node.title}
                    </PortfolioItemNameLinkText>
                  </PortfolioItemNameLink>
                </PortfolioItem>
              ))}
            </PortfolioItems>
          </PortfolioItemsWrapper>
        </Wrapper>
      )}
    />
  )
}

export default PortfolioItemsText

这是我的项目的屏幕截图。当我悬停标题时，我会看到正确的图像，否则图像应该不可见。 截屏

提前致谢！

标签： reactjsgatsby

解决方案

要捕获鼠标悬停事件，您需要使用 onMouseOver 事件。如果您想在 PortfolioItemNameLinkText 上捕获鼠标悬停事件，您最简洁的选择可能是将该事件附加到最外层返回的 html 元素（不需要在最外层，可以是任何真的）。例如，PortfolioItemNameLinkText 返回：

<div onMouseOver={(e)=>{console.log(this.props.children)}}>
//PortfolioItemNameLinkText code
</div>

在这里，我只是在控制台记录 {portfolioItem.node.title} 这是您小时候传入的内容。

PortfolioItemNameLinkText 是功能性/无状态组件吗？如果是这样，请确保您正确传递道具。例如：

function PortfolioItemNameLinkText(props){//code} 
or 
const PortfolioItemNameLinkText = (props) => {//code}

这是另一个线程，展示了如何使用鼠标事件。将鼠标悬停在图像上

推荐阅读