如何将鼠标悬停在使用反应框时显示按钮？

Question

我正在研究一个项目，这是一个在线商店。我只想将“快速查看”和“添加到购物车”按钮悬停在它们所在的产品框上时才可见。而且，它们应该是可单击的。下面的ProductBox代码`

const ProductBox = ({ name, price, promo, stars }) => (
  <div className={styles.root}>
    <div className={styles.photo}>
      {promo && <div className={styles.sale}>{promo}</div>}
      <div className={styles.buttons}>
        <Button variant='small'>Quick View</Button>
        <Button variant='small'>
          <FontAwesomeIcon icon={faShoppingBasket}></FontAwesomeIcon> ADD TO CART
        </Button>
      </div>
    </div>
    <div className={styles.content}>
      <h5>{name}</h5>
      <div className={styles.stars}>
        {[1, 2, 3, 4, 5].map(i => (
          <a key={i} href='#'>
            {i <= stars ? (
              <FontAwesomeIcon icon={faStar}>{i} stars</FontAwesomeIcon>
            ) : (
              <FontAwesomeIcon icon={farStar}>{i} stars</FontAwesomeIcon>
            )}
          </a>
        ))}
      </div>
    </div>
    <div className={styles.line}></div>
    <div className={styles.actions}>
      <div className={styles.outlines}>
        <Button variant='outline'>
          <FontAwesomeIcon icon={faHeart}>Favorite</FontAwesomeIcon>
        </Button>
        <Button variant='outline'>
          <FontAwesomeIcon icon={faExchangeAlt}>Add to compare</FontAwesomeIcon>
        </Button>
      </div>
      <div className={styles.price}>
        <Button noHover variant='small'>
          $ {price}
        </Button>
      </div>
    </div>
  </div>
);

Answer 1

编辑：创建了一个代码框以使其更容易https://codesandbox.io/s/stckovw-hideshow-hs3mh

实现此目的的方法可以通过以下步骤：

• 向要触发按钮呈现的组件添加onMouseEnter和onMouseLeave处理程序，因此您的情况下是ProductBox

• 为按钮的默认类提供display = none

的属性

• 例如，在触发事件处理程序时，将显示切换为阻塞。

如果要为实现保留无状态组件：

• const [display, setDisplay]=useState('notdisplayed');，其中不显示默认类，其中display = none

• [想要隐藏/显示的组件上的<div className={display}>

• setDisplay和onMouseEnter定义中的onMouseLeave调用

Answer 2

请遵循以下代码：

import React, {useState} from "react";

export default function ShowButtonHover() {
    const [style, setStyle] = useState({display: 'none'});

    return (
        <div className="App">
            <h2>Hidden Button in the box. Move mouse in the box</h2>
            <div style={{border: '1px solid gray', width: 300, height: 300, padding: 10, margin: 100}}
                 onMouseEnter={e => {
                     setStyle({display: 'block'});
                 }}
                 onMouseLeave={e => {
                     setStyle({display: 'none'})
                 }}
            >
                <button style={style}>Click</button>
            </div>
        </div>
    );
}