如果模式为深色，则将 bootstrap 开关组件设置为 'checked'

Question

我的 localStorage 中有一个用于我的 Web 应用程序的主题，如果模式设置为 'dark'，我想将选中的值添加到 Switch 组件，或者如果模式为 [=21]，则未选中=]. 但是，当我将主题设置为 'dark' 并刷新页面时，开关会自动变为未选中状态，我该如何解决？下面是代码：

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>
  )
};

看起来是这样，深色主题已打开，但未选中 Switch。

Answer 1

您可以通过对空数组使用 useEffect 挂钩来实现此目的。这将在渲染组件时触发一次内部逻辑。在里面你可以检索以前保存的 mode 属性并用它来设置当前会话状态：

useEffect(() => {
    const isLight = localStorage.getItem('mode');
    if (isLight !== undefined) setActive(isLight);
}, [])

Answer 2

如上述答案所述，状态存储在内存中，刷新页面时会丢失。当您的解决方案将主题状态保存到 localstorage 时，您还需要 将 useState 的初始值设置为存储在 localstorage 中的值，以便在刷新后显示正确的状态。你可以尝试这样的事情：

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)
    }
}, [])

通过将空数组作为第二个参数传递给 useEffect，这只会运行初始渲染。有关 useEffect 的更多信息，请参阅 React 文档：https://reactjs.org/docs/hooks-effect.html

Answer 3

我使用三元运算符解决了 checked 问题，在我想要的情况下为它赋予 True 或 False 值... 这是正确的解决方案！

  <input
  id="switch" 
  role="switch"
  checked={localStorage.getItem('mode') === 'dark'?(true):(false)}
  value={active}
  type="checkbox"
  onClick={()=> handleTheme()}
  className="form-check-input shadow-sm"
  />

如果模式为深色，则将 bootstrap 开关组件设置为 'checked'

Set bootstrap switch component to 'checked' if mode is Dark

javascript

html

reactjs

bootstrap-4

local-storage