Estoy tratando de hacer algún tipo de elemento de entrada flotante, haciendo que siga el desplazamiento. finalmente lo hice y hay un código a continuación.
Lo que me pregunto es si cambio "setText(window.scrollY)" a "document.querySelector(".code).style.top = window.scrollY" no me da el mismo resultado. Creo que es El mismo código pero el código posterior no funciona. ¿Alguien puede decirme por qué? Gracias.
import React, { useState } from "react"; function Input() { const [scroll, setScroll] = useState(0); window.addEventListener( "scroll", function () { if (typeof document.querySelector(".code") === "undefined") { alert("TT"); } else { setScroll(window.scrollY); // *this part } }, { passive: true } ); return ( <input style={{ top: text }} className="code" autoComplete="on" placeholder="Write code please" /> ); } export default Input; setScroll(window.scrollY+"px");
Use el gancho useRef() en lugar de document.querySelector(".code") . React funciona con DOM virtual , por lo que cuando se ejecuta document.querySelector(".code") , el DOM real aún no estaría disponible. Pero puede usar useRef para tomar el DOM virtual y realizar sus manipulaciones en él. Puede acceder al elemento con la propiedad .current de ref.
En segundo lugar, el controlador de eventos de desplazamiento debería estar envuelto en el useEffect de React, para garantizar que se agregue cuando se monte el componente.