@justifycontent

Почему событие производится 2 раза?

При нажатии на closeBtnRef(кнопка, которая закрывает окно) обработчик этого элемента вызывается два раза, т.е. 'done' консолится два раза.

import React from 'react'
import scss from './Cart.module.scss'
import ItemCart from '../ItemCart/ItemCart'
import ButtonGreen from '../Button/ButtonGreen'
import ClassNames from 'classnames'
import { useDispatch, useSelector } from 'react-redux'
import setVisibility from '../../redux/actions/cart'

const Cart = () => {
  const overlayRef = React.useRef()
  const closeBtnRef = React.useRef()

  const { visibility } = useSelector(({ cart }) => ({
    visibility: cart.visibility,
  }))

  const closeCart = e => {
    const path = e.nativeEvent.path
    if (e.target === closeBtnRef.current) {
      console.log('done')
    }
  }

  return (
    <div
      className={ClassNames(scss.overlay, {
        [scss.hide]: !visibility
      })}
      ref={overlayRef}
      onClick={closeCart}
    >
      <div className={scss.cart}>
        <h2>Корзина <span ref={closeBtnRef} onClick={closeCart} className={scss.close}/></h2>
        <div className={scss.list}>
          <ItemCart imgUrl='https://i.ibb.co/LYvrTjh/sneakers-12.jpg' name='Мужские Кроссовки Nike Air Max 270' price='12999'/>
        </div>
        <ul className={scss.totalBlock}>
          <li>
            <span>Итого:</span>
            <div />
            <b>21 498 руб.</b>
          </li>
          <li>
            <span>Налог 5%:</span>
            <div />
            <b>1074 руб.</b>
          </li>
        </ul>
        <ButtonGreen next>Оформить заказ</ButtonGreen>
      </div>
    </div>
  )
}

export default Cart
  • Вопрос задан
  • 99 просмотров
Пригласить эксперта
Ответы на вопрос 1
ArtyomovAnton
@ArtyomovAnton
PHP и всё что рядом
В обработчик допишите
e.stopPropagation();
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы