Eventos JS

VTEX in your native language 🌎 Português
, ,
1

Bom dia, pessoal.
Estou precisando criar um evento apenas para dar Toggle em uma classe, mas não sei se da mesma forma que o css handles funciona, se é o mesmo caso para selectors JS.

Exemplo abaixo:

import React from 'react';

class ToggleClassComponent extends React.Component {
  componentDidMount() {
    document.addEventListener('DOMContentLoaded', () => {
      const triggerElement = document.querySelector('.vtex-rich-text-0-x-paragraph--close-capa-destaque-colecao');
      const targetElement = document.querySelector('.vtex-flex-layout-0-x-flexRow--logo-modal-closed-destaque');

      console.log(triggerElement)

      const handleClick = () => {
        if (targetElement) {
          targetElement.classList.toggle('vtex-flex-layout-0-x-flexRow--hide--all');
        }
      };

      if (triggerElement) {
        triggerElement.addEventListener('click', handleClick);
      }

      // Cleanup function
      return () => {
        if (triggerElement) {
          triggerElement.removeEventListener('click', handleClick);
        }
      };
    });
  }

  render() {
    return null;
  }
}

export default ToggleClassComponent;
2

@raphaelfelix tudo bem?

entendo que um código nessa linha funcione sim… você pode usar a classe padrão dn-s para gerenciar esse toggle (recomendo adicionar um observer p/ sempre garantir que essa classe exista antes de executar esse código).

caso seu desejo seja esconder um bloco todo quando houver uma ação de clique do usuário, recomendo você implementar um aplicativo que encapsule esse bloco no tema e seja responsável por essa renderização/não renderização… você teria um gerenciamento melhor e não precisaria ficar manipulando muita coisa na dom

1 Like
3

Fala, Carlos.
Foi apenas um bloco de teste pra entender se deveria seguir como nome-app–class igual ao CSS handles.
No fim, não está acontecendo mesmo colocando um evento click nesta class e dando console.
Sobre o encapsulamento, consegue me mandar um exemplo básico?
Fiz algo assim usando trigger layout, porém ao clicar no elemento A, ele exibe o elemento B e o elemento A fica oculto e vice e versa.
Abraço

4

Consegui com o trecho abaixo, porém ainda existe um empecilho, já que não é só isso que preciso. Entretanto, foi uma luz. Abraço

const [isHidden, setIsHidden] = useState(true);

const toggleClass = () => {
        setIsHidden(!isHidden);
    };

<button className={`destaque-da-colecao-closed ${isHidden ? "hide--all" : ""}`} onClick={toggleClass}>Close</button>
<div className={`destaque-da-colecao ${isHidden ? "" : "hide--all"}`}>
     <button id="toggle-destaque" onClick={toggleClass}>X</button>
</div>