1

Estoy haciendo una actividad de un curso ReactJS, que consiste en crear un cuadrado y darle un evento de overmouse y cambie los colores cada un seg, lo hice y funciona, pero se debe dejar de ejecutar con un dobleClick y el clearInterval no me estaría funcionando, alguien podría decirme porque ?:

const Cuadrado = () => {

    let cuadradoColor = <div className="square-colors"></div>;

    const [square, setSquare] = useState(cuadradoColor);

    let changeColor=()=>{
        let red = Math.floor((Math.random() * 255));
        let green = Math.floor((Math.random() * 255)); 
        let blue = Math.floor((Math.random() * 255 ));

        let newSquare = <div style={{background:`rgb(${red},${green},${blue})`,
        width: '255px', height: '255px',  border: '2px solid rgb(170, 170, 170)',
        cursor: 'pointer'}}></div>
        setSquare(newSquare);
        
    }
    let intervalId;

    function startInterval(){
        
        if (!intervalId) {
          intervalId= setInterval(changeColor, 1000);
        }
    };
    
    function stopInterval (){
        clearInterval(intervalId);
        intervalId = null;
    };

    return (
        <div onMouseOver={startInterval} onDoubleClick={stopInterval}>
            {/*eslint-disable-next-line*/}
            {square}
         
            
        </div>
    );
}
2
  • Se debe actualizar la pregunta agregando el código en vez de una imágen del código.
    – g.4
    el 13 ene. a las 0:59
  • el problema es que la referencia al intervalId se pierde cuando se cambia el estado del componente... define el intervalId como useRef o como un useState tambien (aunque yo optaría por useRef)
    – Pipe
    el 13 ene. a las 19:17

1 respuesta 1

1

El problema es que la referencia al intervalId se pierde cuando se cambia el estado del componente... define el intervalId como useRef para que la referencia no se pierda, así:

function Cuadrado() {

  const intervalId = React.useRef(null);
  const [square, setSquare] = React.useState(null);

  function changeColor(){
    console.log("Cambiando color...");
    let red = Math.floor((Math.random() * 255));
    let green = Math.floor((Math.random() * 255)); 
    let blue = Math.floor((Math.random() * 255 ));

    let newSquare = <div style={{background: `rgb(${red},${green},${blue})`,
        width: '100px', height: '100px',  border: '2px solid rgb(170, 170, 170)',
        cursor: 'pointer'}}></div>
    setSquare(newSquare);
  }

  function startInterval(){
    console.log("Cambiando color");
    if (!intervalId.current) {
      intervalId.current = setInterval(changeColor, 1000);
    }
  };
    
  function stopInterval (){
    console.log("Detenido");
    clearInterval(intervalId.current);
    intervalId.current = null;
  };
  
  return (
    <div onMouseOver={startInterval} onDoubleClick={stopInterval} style={{width:100, height: 100, background:"gray"}}>
       {square}
    </div>
  );
}

ReactDOM.render(<Cuadrado />, document.querySelector('#app'));
<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>
<div id="app"></div>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.