Как показать кнопку при наведении курсора на поле с помощью реакции? - PullRequest
Новая
       17

Как показать кнопку при наведении курсора на поле с помощью реакции?

0 голосов
/ 09 апреля 2020

Я работаю над проектом, это интернет-магазин в действии. Мне бы хотелось, чтобы кнопки «Быстрый просмотр» и «Добавить в корзину» были видны только при наведении курсора на коробку с продуктом, в которой они находятся. Кроме того, они должны нажиматься. Код 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>
);

Ответы [ 2 ]

1 голос
/ 09 апреля 2020

РЕДАКТИРОВАТЬ: сделал коды и поле, чтобы упростить 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 определении

0 голосов
/ 09 апреля 2020

Пожалуйста, следуйте приведенному ниже коду: 

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>
    );
}
...