0

estou tentando mudar a cor de div com click de botão, aparentemente era para funcionar, mas só funciona no segundo click, não entendo.

O código está assim :

A função que eu mudo a cor:


  function Click( id: string,color: string) {
    let element = document.getElementById(id);
    if (element != null) {
      element.style.backgroundColor = active ? color : "#C4C4C4";
    }

  }

O JSX da parte especifica:

        <button
          className="button__carrosel"
          onClick={(event) => Click(id, acao, color)}
        >
          <div id={id} className="rectang">
            {title}
          </div>
        </button>

Ela funciona quando eu clico duas vezes, mas queria que mudasse de cor no primeiro click. Utilizei getElementById, mas já tentei mudando o nome da classe também quando o botão estivesse ativo, mas da no mesmo, só funciona no segundo click. Alguém tem noção d

2 Respostas 2

2

Existem várias estratégias para mudar cores de algum elemento com mas, a sua não foi a melhor escolha, porque, está misturando comandos, componentes em precisam ter estados globais ou locais para mudanças, um exemplo básico para mudanças de uma div fazendo toggle (true or false) e mudando a cor:

1 ) Com estado a forma natural do React

function App() {
  const [toogle, setToogle] = React.useState(true);
  const [cor, setCor] = React.useState('#c3c3c3');
  React.useEffect(() => {
    setCor((state) => toogle ? '#c3c3c3': '#446677');
  }, [toogle]);
  return (
    <div>
      <button
          onClick={e => 
            setToogle(state => !state)}
       >Alterar</button>
       <br /><br />
       <div style={{
          height: '200px', 
          width: '200px', 
          backgroundColor:cor,
        }}>      
       </div>
    </div>
  )
}

ReactDOM.render( <App/> , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
<div id="root">Carregando ...</div>

onde o estado vai controlar as duas cores que foram estipulados nesse código.

2 ) Referencia do elemento:

Por referencia da div também podemos mudar cores de qualquer elemento de tela, exemplo:

function App() {
  const refDiv = React.useRef()  
  const [toogle, setToogle] = React.useState(true);  
  React.useEffect(() => {    
    if (refDiv.current) {
      refDiv.current.style.backgroundColor = '#c3c3c3';
      refDiv.current.style.height = '200px';
      refDiv.current.style.width = '200px'
    }
  }, []);
  React.useEffect(() => {    
    if (refDiv.current) {
      if (toogle) {
        refDiv.current.style.backgroundColor = '#c3c3c3';
      } else {
        refDiv.current.style.backgroundColor = '#446677';
      }
    }
  }, [toogle]);
  
  return (
    <div>
      <button
          onClick={e => 
            setToogle(state => !state)}
       >Alterar</button>
       <br /><br />
       <div ref={refDiv}>      
       </div>
    </div>
  )
}

ReactDOM.render( <App/> , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
<div id="root">Carregando ...</div>

é uma forma não usual, particularmente não usuária, mas, essa forma encontrada para acessar a <div> por referencia, algum eventos até são legais para usar por exemplo colocar focus() em elementos <input />, então a primeira opção é excelente e não lhe causa problemas futuros.

3 ) Com styled components: site

Sendo essa forma muito utilizado para estilizar componentes do de forma dinâmica por propriedades é alterado o elemento:

const DivColor = window.styled.div`
  background: ${({toggle}) => toggle ? '#c3c3c3': '#446677'};
  height: 200px;
  width: 200px;
`;

function App() {
  const [toggle, setToggle] = React.useState(true);
  return (
    <div>
      <button
          onClick={e => 
            setToggle(state => !state)}
       >Alterar</button>
       <br /><br />
      <DivColor toggle={toggle}></DivColor>      
    </div>
  )
}

ReactDOM.render( <App/> , document.getElementById('root'));
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script><script src="https://unpkg.com/react-is/umd/react-is.production.min.js"></script><script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>
<div id="root">Carregando ...</div>

As 3 formas funcionam, a 1 e a 3 são as mais recomendadas por trabalharem com estado e comandos do React a 2 são mais para eventos ou algo em especifico, mas, como dito não muito usado para estilização.

0
0

Adicionar estilos desta maneira não é muito interessante. Eu posso sugerir que crie um componente para este botão e tenha um estado para controlar se está ativo ou não como no código de exemplo a seguir:

const Button = ({ title }) => {
  const [active, setActive] = useState(false);

  return <button onClick={() => { setActive(true) }>
    <div className={`${active ? 'active' : ''}`}>{title}</div>
  </button>
}

Desta maneira, no momento em que clicar no botão a mudança de estado fará com que os elementos deste componente sejam renderizados novamente mudando o estilo da sua div.

3
  • Entendiii! E se eu tivesse algo assim: const [active, setActive] = useState({ card1: false, card2: false, card3: false, card4: false, card5: false, card6: false, card7: false, }); e eu tivesse <div className={${active.id ? 'active' : ''}} id={id} > {title} </div> no qual esse "id" fosse card1 ou card2 etc... ele não reconheceu id como card1 card2, como eu poderia resolver iss?
    – Rindi
    Commented 30/10/2020 às 14:54
  • Qualquer duvida além da sua pergunta original gera automaticamente por você @Rindi uma nova pergunta! faça isso gere uma nova pergunta com esse comentário e claro esclarece o máximo possivel
    – novic
    Commented 30/10/2020 às 15:20
  • Mas eu tentei fazer e falaram que era uma pergunta duplicada dessa de agora, não entendi
    – Rindi
    Commented 30/10/2020 às 15:21

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .