检查哪个元素在 React 中悬停答案

【问题标题】：Check which element is hovered in React检查哪个元素在 React 中悬停
【发布时间】：2019-10-03 02:36:38
【问题描述】：

我正在使用 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

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

提前致谢！

【问题讨论】：

通过在迭代时为每个项目分配一个唯一的key
我向PortfolioItem 和PortfolioImage 添加了密钥。我如何使用它来获取属于悬停标题的图像？
或者我如何从我悬停的项目中获取数据？前任。如果我悬停portfolioItem.node.title 是Sample1 的项目，我想获得相同项目的portfolioItem.node.slug。通过这样做，我想我可以在标题悬停时以某种方式设置正确的图像。
能否制作代码沙箱示例？

标签： reactjs gatsby

【解决方案1】：

将索引传递给handleHover 和mouseMovement 应该可以正常工作并访问这些函数中的数组项以处理悬停逻辑。让我知道它是否有效

<PortfolioItemsWrapper>
            <PortfolioItems>
              {props.allWordpressWpPortfolio.edges.map((portfolioItem, index) => (
                <PortfolioItem
                  style={currentStyle}
                  key={portfolioItem.node.id}
                  onMouseOver={(e) => handleHover(e, index)}
                  onMouseOut={(e) => handleLeave(e, index)}
                >
                  <PortfolioItemNameLink
                    onMouseEnter={(e) => mouseMovement(e, index)}
                    onMouseLeave={(e) => mouseMovement(e, index)}
                    to={`/portfolio/${portfolioItem.node.slug}`}
                  >
                    <PortfolioItemNameLinkText>
                      {portfolioItem.node.title}
                    </PortfolioItemNameLinkText>
                  </PortfolioItemNameLink>
                </PortfolioItem>
              ))}
            </PortfolioItems>
          </PortfolioItemsWrapper>

【讨论】：

抱歉不清楚。我的事件处理程序只是一些失败的尝试构建跟随鼠标的元素。我编辑了我的帖子并把它们拿走了。但我也尝试将索引添加到 thisonMouseOver={(e) => handleHover(e, index)}。现在它在代码中，但我不知道如何使用它或这有什么帮助？
我没听明白你能编辑你的评论并正确解释吗？

【解决方案2】：

要捕获鼠标悬停事件，您需要使用 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}

这是另一个线程，展示了如何使用鼠标事件。 Mousing over an image

【讨论】：

我试过这个，就像你展示的那样。 onMouseOver={(e)=>{console.log(this.props.children)} 给了我错误TypeError: Cannot read property 'props' of undefined，如果我在没有this 的情况下尝试onMouseOver={(e)=>{console.log(props.children)}，它只会记录身份不明。
编辑原帖到地址道具

【解决方案3】：

它现在按我想要的方式工作。我想我的问题表达得很糟糕。如果我悬停投资组合项目标题，我会得到与该项目相关的显示图像。图像在 after 选择器中设置。这是我的代码：

const PortfolioItemNameLink = styled(Link)`
  display: inline-block;
  z-index: -2;
  text-decoration: none;
  color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #fff;
  transition: 0.25s linear;
  &:hover {
    color: #fff;
  }
  &:after {
    content: "";

    background-image: ${props => `url(${props.itemimage}) `};
    background-size: 100%;
    width: 300px;
    height: 300px;
    opacity: 0;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.25s linear;
    z-index: -1;
    visibility: hidden;
  }
  &:hover&:after {
    opacity: 0.7;
    visibility: visible;
  }
`

 <PortfolioItemNameLink
   to={`/portfolio/${portfolioItem.node.slug}`}
   itemimage={`${portfolioItem.node.featured_media.source_url}`}
 >

感谢您的帮助。

【讨论】：