Estamos usando nextjs e intentando cambiar el estilo con un clic de botón con document.getElementById pero el estilo no cambia independientemente de lo que hagamos.
páginas/index.js
function Index() { function change(){ console.log('changing'); document.getElementById('navi').style.color='blue'; } return (<Some test={change}> </Some>) }Ahora, hay otro directorio de páginas externas de componente de reacción normal y es como se muestra a continuación.
function Some(prop){ return (<div id="navi"> <button onClick={prop.test}></button> </div>); } Ahora, cada vez que hacemos clic en el botón, se ejecuta la función change() en index.js e imprime el archivo console.log como 'cambiante', pero document.getElementById nunca funciona. ¿Hay alguna razón específica para esto? Por favor, háganoslo saber.
debe usar useRef en lugar de id y luego en onClick cuando llame a prop.test, debe pasar esa referencia como un argumento como este:
function change(e){ e.current.style.color="blue" } const navi= useRef(null) <div ref={navi}> <button onClick={()=>prop.test(navi)}></button> </div>