0
151
VistasEstablezca el componente de interruptor de arranque en 'marcado' si el modo es oscuro
Tengo un tema para mi aplicación web en mi almacenamiento local y quiero agregar el valor marcado al componente Cambiar si el modo está configurado en 'oscuro' o sin marcar, si el modo es 'claro'. Sin embargo, cuando configuro el tema en "oscuro" y actualizo la página, el interruptor cambia automáticamente a desmarcado, ¿cómo puedo solucionarlo? A continuación se muestra el código:
import React, { useState,useEffect } from 'react'; import useTheme from '../custom/useTheme'; export default function Switch() { const[active,setActive] = useState(false); function handleTheme(){ if(active === false){ // Dark mode useTheme(true); setActive(true); localStorage.setItem('mode','dark'); }else if(active === true){ // Light mode useTheme(false); setActive(false); localStorage.setItem('mode','light'); } }; return ( <div id='switchBox' className='form-check form-switch'> <input id="switch" role="switch" // checked value={active} type="checkbox" onClick={()=> handleTheme()} className="form-check-input shadow-sm" /> <label className='ms-1' htmlFor='switch' >Dark</label> </div> ) };Así es como se ve, el tema Oscuro está activado, pero el Interruptor no está marcado.
3 Respuestas
Responde la pregunta0
Puede lograr esto usando useEffect hook con una matriz vacía. Esto activará la lógica interna una vez cuando se represente el componente. En el interior, puede recuperar la propiedad de mode guardada previamente y usarla para establecer el estado de la sesión actual:
useEffect(() => { const isLight = localStorage.getItem('mode'); if (isLight !== undefined) setActive(isLight); }, [])0
Como menciona la respuesta anterior, el estado se almacena en la memoria y se pierde cuando actualiza la página. Si bien su solución conserva el estado del tema en el almacenamiento local, también debe establecer el valor inicial de useState en el valor almacenado en el almacenamiento local para mostrar el estado correcto después de la actualización. Puedes intentar algo como esto:
const[active, setActive] = useState(false) // Get stored data from local storage if available on first render useEffect(() => { // Get stored theme mode and set it in state manager const storedTheme = localStorage.getItem('mode') if(storedTheme) { setActive(storedTheme) } }, [])Al pasar una matriz vacía como segundo parámetro para useEffect, esto solo se ejecutará en el renderizado inicial. Para obtener más información sobre useEffect, consulte los documentos de React: https://reactjs.org/docs/hooks-effect.html
0
Resolví usando check con un operador ternario, dándole el valor de Verdadero o Falso en el caso de que quisiera... ¡Esa es la solución correcta!
<input id="switch" role="switch" checked={localStorage.getItem('mode') === 'dark'?(true):(false)} value={active} type="checkbox" onClick={()=> handleTheme()} className="form-check-input shadow-sm" />