Tengo un componente ScrollToTop, que esencialmente se desplaza hacia la parte superior después de hacer clic en el botón; sin embargo, noté que el foco permanece en el botón. ¿Cómo haría para establecer el foco en un elemento en otro componente?
Aquí está mi componente ScrollToTop:
const ScrollToTop = () => { const [showScrollButton, setShowScrollButton] = useState<boolean>(false) const checkScrollToTop = () => { if (!showScrollButton && window.pageYOffset > 400) { setShowScrollButton(true) } else if (showScrollButton && window.pageYOffset <= 400) { setShowScrollButton(false) } }; const scrollToTop = () => { window.scrollTo({ top: 0, behavior: 'smooth' }); }; window.addEventListener('scroll', checkScrollToTop) return ( <button type='button' onClick={scrollToTop} > </button> ); } export default ScrollToTop;Y luego simplemente lo importo a la página, sin embargo, el elemento en el que quiero que se establezca el foco está dentro del componente Lista:
return ( <div> <List collections={collections} /> </div> <ScrollToTop /> );document.getElementById("yourElementID").focus();
La línea anterior enfoca el elemento con ID yourElementID .
Intente agregar esa línea después de desplazarse.
Cambio
const scrollToTop = () => { window.scrollTo({ top: 0, behavior: 'smooth' }); };A
const scrollToTop = () => { window.scrollTo({ top: 0, behavior: 'smooth' }); document.getElementById("yourElementID").focus(); };En su caso, el componente ScrollToTop cambia el comportamiento del componente List. Por lo tanto, extraería el manejo de esto en el componente principal, que representa ambos componentes.
Creé una pequeña demostración (con algunos errores mecanografiados irrelevantes), que muestra más claramente lo que quiero decir: https://codesandbox.io/s/scrolltotopdemo-dh3q3
Básicamente: