javascript - 我如何使用状态实现暗模式并将设置保存到我的本地存储？

Question

我正在尝试在 ReactJS 中构建暗模式。我尝试在 stackoverflow 中查找其他答案，但没有一个操作系统使用与我正在使用的方法相同的方法。

我正在尝试做的事情:

=> 构建一个深色/浅色模式 Web 应用程序，所以当我单击按钮时，它会从深色模式切换到浅色模式，再从深色模式切换到浅色模式，等等。

我的方法是什么:

=> 我创建了一个简单的一页虚拟页眉，其中包含少量文本和标题。我添加了一个“切换”按钮，单击该按钮将在暗/亮模式之间切换。

=> 我用 bool 值启动了我的“状态”，并将 onClick 按钮添加到我的“切换”按钮。每当我们单击按钮时，它都会调用一个名为 handlechange() 的函数，该函数会使用“this.setState”进一步更新“state”并更改我们的 bool 值。

=> 根据我们的 bool 值，我们的 div 的“className”正在改变，它呈现了我在我的 CSS 中进一步定义的深色和浅色模式的特定样式集。

什么在起作用:

=> 按钮运行良好，我可以在模式之间切换。

问题是什么:

=> 我正在尝试将 bool 值存储在浏览器的本地存储中。

=> 原因是，即使用户刷新页面，他们仍然停留在他们之前选择的相同模式。

=> 我已经设法将 bool 值存储在本地存储中的变量名称“toggle”中，并尝试使用 console.log(toggle)，它会从 false、true、false 变化,true 等等，但是当我用

替换我的类名时

<div className={this.state.setClass ? "dark-mode" : "light-mode"}>

到

<div className={toggle ? "dark-mode" : "light-mode"}> 

它根本不起作用，意味着按钮不响应更改并保持亮模式，即使切换变量从 true、false、true、false 变化......等等(当我尝试登录时) .

解决这个问题的方法应该是什么，以便我什至可以将值存储在本地存储中并将本地存储用于类名？

感谢您的耐心阅读。请帮帮我:)

我的代码:

import React from "react";
import ReactDOM from "react-dom";
import "./DarkMode.scss";

class DarkMode extends React.Component {
  state = {
    setClass: false
  };

  handleChange = () => {
    this.setState({
      setClass: !this.state.setClass
    });
    
  };

  render() {
    localStorage.setItem("Mode", !this.state.setClass);
    let toggle = localStorage.getItem("Mode");
    console.log(toggle);
    return (
      <div className={this.state.setClass ? "dark-mode" : "light-mode"}>
        <nav>Toggle goes Here</nav>
        <main>
          <h1>Light Mode</h1>
          <h2>Toggle the switch to see some magic happen!</h2>
          <button onClick={this.handleChange}>Switch</button>
        </main>
      </div>
    );
  }
}

export default DarkMode;

Answer 1

像这样解析 let toggle = JSON.parse(localStorage.getItem("Mode"));

class DarkMode extends React.Component {
 state = {
    setClass: JSON.parse(localStorage.getItem("Mode"))
  };

  handleChange = () => {

    if (JSON.parse(localStorage.getItem("Mode")) === true)
      this.setState({ setClass: false }, () => {
        localStorage.setItem("Mode", JSON.stringify(false));
      });
    else {
      this.setState({ setClass: true }, () => {
        localStorage.setItem("Mode", JSON.stringify(true));
      });
    }
  };

  render() {
    const { setClass } = this.state;
    return (
      <div className={setClass ? "dark-mode" : "light-mode"}>
        <nav>Toggle goes Here</nav>
        <main>
          <h1>Light Mode</h1>
          <h2>Toggle the switch to see some magic happen!</h2>
          <button onClick={this.handleChange}>Switch</button>
        </main>
      </div>
    );
  }
    }