Jump to content
Fórum Script Brasil
  • 0

Imagem automatica React


Manu Santos

Question

A função automática chamada por onclick, era para percorrer o array, e a cada indice do array, fazer a condição do for, e mudar a imagem no SetImagem com base nesse indice.

Mas ele esta renderizando as imgs de uma vez, e não esta dando tempo de mostrar uma por uma, e repetir isso a cada 1seg : setInterval.

 

CODIGO -->

 

import { useState, useEffect } from 'react';
 
function Buttons(props) {
  return (
    <button className='verde' onClick={props.clicar}>
      verde
    </button>
  );
}
 
export function App() {
  let imagens = [
  'https://github.com/fernandoleonid/mini-projetos-js/blob/master/02-semaforo/img/desligado.png?raw=true',
 
   'https://github.com/fernandoleonid/mini-projetos-js/blob/master/02-semaforo/img/verde.png?raw=true',
   'https://github.com/fernandoleonid/mini-projetos-js/blob/master/02-semaforo/img/vermelho.png?raw=true',
 
    'https://github.com/fernandoleonid/mini-projetos-js/blob/master/02-semaforo/img/amarelo.png?raw=true',
  ];
   
 
 
  const Automatico = () => {
 
      for (key = 0; key < 4; ++key ) {
       
        imagem = imagens[key]
       
        console.log(imagem)
       
      }
      setImagem(imagem)
  }
 
 
  let [imagem, setImagem] = useState(imagens[0]);
  const [nextImg, setNextImg] = useState(true);
 
  const Trocarimagem = novaimagem => {
    setImagem(novaimagem);
    setNextImg(!nextImg);
  };
 
  return (
    <div className='App'>
      <div style={{ marginTop: '15px' }}>
        <Buttons clicar={() => Trocarimagem(imagens[1])} />
        <button onClick={() => Trocarimagem(imagens[2])}>vermelho</button>
        <button onClick={() => Trocarimagem(imagens[3])}>amarelo</button>
        <button onClick={() => setInterval(Automatico, 1000)}>automatico</button>
        <img src={imagem} style={{ width: '20%' }} />
      </div>
    </div>
  );
}
Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0

Olá!
Verifique se seria assim:
 

import { useState } from 'react'

function Buttons(props) {
  return (
    <button className="verde" onClick={props.clicar}>
      verde
    </button>
  )
}

const imagens = [
  'https://github.com/fernandoleonid/mini-projetos-js/blob/master/02-semaforo/img/desligado.png?raw=true',

  'https://github.com/fernandoleonid/mini-projetos-js/blob/master/02-semaforo/img/verde.png?raw=true',
  'https://github.com/fernandoleonid/mini-projetos-js/blob/master/02-semaforo/img/vermelho.png?raw=true',

  'https://github.com/fernandoleonid/mini-projetos-js/blob/master/02-semaforo/img/amarelo.png?raw=true'
]
let timeInterval = () => {}

export default function App() {
  const [imageIndex, setImageIndex] = useState(0)

  const TrocarImagem = (novaImagem) => {
    clearInterval(timeInterval)
    setImageIndex(novaImagem)
  }

  const Automatico = () => {
    console.log('automatico :>> ')
    timeInterval = setInterval(
      () =>
        setImageIndex((old) => {
          const nextImage = old + 1
          return nextImage >= imagens.length ? 1 : nextImage
        }),
      1000
    )
  }

  return (
    <div className="App">
      <div style={{ marginTop: '15px' }}>
        <Buttons clicar={() => TrocarImagem(1)} />
        <button onClick={() => TrocarImagem(2)}>vermelho</button>
        <button onClick={() => TrocarImagem(3)}>amarelo</button>
        <button onClick={Automatico}>automatico</button>
        <img src={imagens[imageIndex]} style={{ width: '20%' }} />
      </div>
    </div>
  )
}

 

Link to comment
Share on other sites

  • 0

Compreendo, mt obg pelo seu tempo em ajudar! So uma dúvida. Mas não é muito adequado usar tipos de loops em react? seria mais apropriado criar uma função manualmente para esse obejetivo, como foi o caso? Ou foi a sintaxe usada ou minha logica que estava errada?

 

Agradeço desde já!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      152.1k
    • Total Posts
      651.9k
×
×
  • Create New...