Как выполнить querySelector в CSS module в среде React?

Question

[uRoot]

При клике на кнопку срабатывает функция:

const target = event.currentTarget.closest(".item"),
          name = target.querySelector(".item__name").innerText,
          price = parseInt( target.querySelector(".item__price").innerText ),

Так было до CSS модулей. Как выполнить тоже самое если используются модули?

Comments

[McBernar]

Вы же реакт используете. Зачем вы пишете эту императивщину с селекторами и innertext?

[Алексей]

https://ru.reactjs.org/docs/refs-and-the-dom.html

[uRoot]

McBernar, Алексей, я читал, что рефы не рекомендуется использовать:
https://medium.com/@abraztsov/refs-%D0%B2-react-%D...

Цитата:

Когда их вообще надо использовать ?
Желательно никогда. Только, если в них есть необходимость.

Да и сама дока говорит, что злоупотреблять не стоит. Я подумал, что это как раз-таки мой случай :) К тому же у меня это карточка товара, коих на странице может быть много.

[McBernar]

CryNet, ага, и при этом вы используете еще более устаревший подход, работая напрямую с селекторами и вписывая текст в ноду через innerhtml.

У вас есть стейт/хуки. Кто вам мешает брать значения оттуда и подставлять в блок item__price? Реакт сам будет следить за состоянием этого значения и при изменении автоматически обновлять его в дом-дереве.

Если уж взяли реакт, так разберитесь хоть немного. Использовать реакт как замену jquery не стоит.

[Алексей]

CryNet, так вы определитель для начала, вам просто надо получить доступ к dom элементу в реакте, но код у вас уже такой есть, или все таки сделать как правильно? Если правильно, тогда переделывайте на нормальный компонентный подход, прокидывайте нужные пропсы в компонент и по клику передавайте что нужно из компонента. А может у вас так и есть, а вы просто по старинке пытаетесь сделать как умеете, но мы то откуда знаем.

[uRoot]

Алексей,

прокидывайте нужные пропсы в компонент

Это есть. Я прокидываю функцию-событие (по клику), которое висит на button:

const result = items.map((item, i) => {
      return (
        <div key={i} className={style.item}>
          <div><img src={item.img} width="250px" height="250px" alt={item.name}></img></div>
          <h2>{item.name}</h2>
          <p>{item.components}</p>
          <p><span>{item.mass}</span></p>
          <p><span>{item.price}</span></p>
          <ShoppingBasketContext.Consumer>
          {( {addToCard} ) => (
            <button onClick={(event) => {addToCard(event)}} >Заказать</button>
          )}
          </ShoppingBasketContext.Consumer>
        </div>
      )
    })

    return (
      <div className="content">{result}</div>
    )

Consumer использую т.к. state и функция работающая с ним находиться в компоненте на несколько уровней выше [если что-то не верно - напишите пожалуйста].

Саму функцию addToCard() я фактически полностью показал. Ниже это всё пушиться и добавляется в state:

const target = event.currentTarget.closest(".item"),
          name = target.querySelector(".item__name").innerText,
          price = parseInt( target.querySelector(".item__price").innerText );
...
basketItems.push({ name: name, price : price, quantity : 1 }); 
...
this.setState({ basketItems })

Всё что нужно - получить данные по клику из каточки товара и добавить в state.

или все таки сделать как правильно

Нужно сделать правильно.

[uRoot]

McBernar,

работая напрямую с селекторами и вписывая текст в ноду через innerhtml

Как плохо вы обо мне подумали))) Нет. Мне нужно только извлечь по клику данные из карточки товара: цену и название, чтобы потом добавить с state.

[Алексей]

CryNet, в вашем случае достаточно изменить функцию addToCard, чтобы она принимала не event, а конкретный item.name и item.price. Ну и по хорошему сделать отдельный компонент для карточки товара и передавать в него уже в качестве пропсов item и addToCard функцию

[uRoot]

Алексей, то есть если используются CSS модули, то я могу полностью забыть за querySelector или есть какие-то практики?

[Алексей]

CryNet, да какая разница как вы работаете с css в реакте, в любом случае их не нужно использовать. Если вам по какой-то причине нужно обратиться к dom элементу, например, чтобы сделать фокус на инпуте программно или вам нужен неконтролируемый компонент, то следует использовать ref'ы, во всех остальных случаях вы просто манипулируете стейтом/пропами из компонентов.

[uRoot]

Алексей,

во всех остальных случаях вы просто манипулируете стейтом/пропами из компонентов

Ага. Понял. Правда блин придётся переучиваться. Сейчас даже кажется, что это неудобно.