0
135
Vistasagregar clase activa Al reaccionar sin estado y alternar usando JS dom
Estoy tratando de agregar Active Class en React usando JS dom, pero no funciona para mí. Por favor, ayúdeme a encontrar la solución. Proporcione una solución completa que incluya el código con una pequeña explicación porque siento que estoy confundido al tratar con el Dom.
<FilterOrder> <div className="" onClick={ActiveClass}> Today </div> <div className="" onClick={ActiveClass}> Yesterday </div> <div className="" onClick={ActiveClass}> This Week </div>Mi función =>
const ActiveClass=(e)=>{ const active=e.target.classList; const prevActive=document.getElementsByClassName("Active"); prevActive.forEach((e)=>console.log("hello")); active.classList.add("Active"); }error =>
1 Respuestas
Responde la pregunta0
La mutación DOM es muy antipatrón en React. Use referencias de React para obtener acceso a DOMNodes subyacentes, o simplemente alterne los nombres de clase de la manera React usando algún estado local.
Dicho esto, el error se debe a que getElementsByClassName devuelve una colección que no es una Array real, devuelve unaHTMLCollection , que es una estructura similar a una matriz.
No hay ningún método forEach para invocar. Puede usar Array.from si desea/necesita iterar los elementos devueltos.
const ActiveClass = (e) => { const active = e.target.classList; const prevActive = document.getElementsByClassName("Active"); Array.from(prevActive).forEach((e) => console.log("hello")); active.classList.add("Active"); }