Estoy tratando de hacer un interruptor de encendido y apagado en Next.Js. Para obtener ayuda, vi este video: https://www.youtube.com/watch?v=1W3mAtAT7os&t=740s El problema es que cada vez que recargo la página, el interruptor requiere 2 clics antes de mover el interruptor y 3 clics para volver a apagarlo
aquí está el código en mi archivo .js
import React, { useEffect, useState } from 'react' export default function Navigation() { const [menuActive, setMenuActive] = useState(false); const Toggle = ({onChange}) => <label className='menu-button'> <input type="checkbox" onChange={onChange} className='input'/> <span className='slider'/> </label> ; return ( <div> <div className='menu-button-container'> <Toggle onChange={(event) => setMenuActive(event.target.checked)} /> </div> </div> ) }y aquí está el CSS:
.menu-button-container { width: 50%; height: 125px; right: 0; display: flex; justify-content: flex-end; align-items: center; position: fixed; } .menu-button { position: relative; width: 90px; display: flex; justify-content: center; } .input { position: absolute; left: -9999px; top: -9999px; } .input:checked + .slider:before { width: 17px; height: 17px; border-radius: 50px; transition: 0.3s; background: white; background-repeat: no-repeat; background-size: 12.5px; background-position: center; left: 30px; content: ""; } .slider { display: flex; cursor: pointer; width: 50px; height: 25px; border-radius: 100px; background-color: black; position: relative; align-items: center; z-index: 2; } .slider:before { content: ""; position: absolute; left: 2px; width: 17px; height: 17px; border-radius: 50px; transition: 0.3s; background: white; background-repeat: no-repeat; background-size: 12.5px; background-position: center; }Gracias por adelantado :)
¡Olvidó pasar el valor de la casilla de verificación en el componente Toogle !
Prueba este código, ¡funciona!
import React, { useEffect, useState } from 'react' export default function Navigation() { const [menuActive, setMenuActive] = useState(false); const Toggle = ({ onChange, value }) => <label className='menu-button'> <input checked={value} type="checkbox" onChange={onChange} className='input' /> <span className='slider' /> </label> ; return ( <div> <div className='menu-button-container'> <Toggle value={menuActive} onChange={(event) => setMenuActive(event.target.checked)} /> </div> </div> ) }Pruebe con valor verdadero en lugar de falso.
import React, { useEffect, useState } from 'react' export default function Navigation() { const [menuActive, setMenuActive] = useState(true); const Toggle = ({onChange}) => <label className='menu-button'> <input type="checkbox" onChange={onChange} className='input'/> <span className='slider'/> </label> ; return ( <div> <div className='menu-button-container'> <Toggle onChange={(event) => setMenuActive(event.target.checked)} /> </div> </div> ) }