0

Есть необходимость сделать в интернет-магазине следующее: если клиент нажимает "добавить в корзину", то он добавляется, а на странице у человека появляется количество товаров как на картинке

выведение количества товаров

У картинки есть блок, который расположен абсолютно от неё, в ней input, его value отображает число, в данном случае двойку(2). Если value != 0, то всему блоку нужно добавлять класс active, чтобы он отображался. Но не понимаю, как реализовать это на React. Не нашёл ничего, чтобы работало на react в jsx без TypeScript. Можно идеи, для которых нужно внести это в базу данных, можно на coocie или чём-нибудь похожем

<div className="flex_heder">
  <Link to="basket">
    <div className="sunbnav_link">
      <img src={Basket} alt="" />
      <input value="2" id="basketPoint" 
      className="member_point active" />
    </div>
  </Link>
</div>

Вот так выглядит код шапки (которая на картинке)

1 ответ 1

0

В вашей версте вы используете input, его же клиент не будет изменять, можно сделать без него. Соответственно все прописанные классы можно добавить параграфу. Ниже примеры уже решат вашу проблему

Пример Вашей верстки:

const [value, setValue] = useState(0)

return(
<div className="flex_heder">
  <Link to="basket">
    <div className="sunbnav_link">
      <img src={Basket} alt="" />
      <input value="2" id="basketPoint" 
      className={"member_point"+ (value?'active':'')} />
    </div>
  </Link>
</div>
)

Другой пример верстки:

const [value, setValue] = useState(0)

return(
<div className="flex_heder">
  <Link to="basket">
    <div className="sunbnav_link">
      <img src={Basket} alt="" />
      <p id="basketPoint" 
      className={"member_point"+ (value?'active':'')}>{value}</p>
    </div>
  </Link>
</div>
)

Стейт который указан в примерах может быть заменен redux'ом

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.