Estoy construyendo una aplicación de reacción simple. Estoy tratando de representar un elemento JSX con algunas etiquetas. Y estoy tratando de ejecutar el código javascript al hacer clic en una "etiqueta" particular de querySelectorAll , pero no funciona cuando hago clic en cualquier etiqueta presente en la página. Soy nuevo en React.
Aplicación.js
class App extends React.Component { render() { const options = document.querySelectorAll("label"); for (let i = 0; i < options.length; i++) { options[i].addEventListener("click", ()=>{ console.log(i) }); } return ( <div> <label htmlFor="1" className="div-down"> <span>HTML</span> </label> <label htmlFor="2" className="div-down"> <span>JavaScript</span> </label> </div> ) } } export default App;Cuando ejecuto el código anterior, no muestra nada.
También intenté poner el código javascript en el archivo .js e importarlo, pero aún no funciona. También lo intenté poniendo el código javascript en el archivo index.html pero aún no funcionó
Cualquier ayuda sería muy apreciada. Muchísimas gracias
Como opción, puede mover el componente a uno funcional y usar useEffect allí
const App = () => { useEffect(() => { const options = document.querySelectorAll("label"); for (let i = 0; i < options.length; i++) { options[i].addEventListener("click", ()=>{ console.log(i) }); } }, []); return ( <div> <label htmlFor="1" className="div-down"> <span>HTML</span> </label> <label htmlFor="2" className="div-down"> <span>JavaScript</span> </label> </div> ) }Lo más probable es que lo haga.