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

debugcn 发表于 Dev

Abhinav安舒尔

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

我正在尝试做的是：

=>构建暗/亮模式Web应用程序，因此当我单击按钮时，它会从暗模式切换到亮模式，再从暗模式切换到亮模式，依此类推。

我的方法是：

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

=>我用boolean初始化了“状态”，并将onClick按钮添加到了“切换”按钮。每当我们单击按钮时，它都会调用一个名为handlechange（）的函数，该函数会使用“ this.setState”进一步更新“状态”并更改布尔值。

=>基于我们的布尔值，我们的div的“ className”正在更改，它将为我在CSS中进一步定义的深色和浅色模式呈现特定的样式集。

工作原理：

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

问题是什么：

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

=>原因是，即使用户刷新页面，他们也将保持先前选择的相同模式。

=>我设法将布尔值存储在变量名称“ toggle”的本地存储中，并尝试进行console.log（toggle），它确实从false，true，false，true等更改，但是当我替换时我的班级名称

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

至

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

它根本不起作用，这意味着按钮不会响应更改，而是保持亮灯模式，即使将toggle变量从true，false，true，false等更改（当我尝试登录时）也是如此。

解决该问题的方法应该是什么，这样我什至可以将值存储在localstorage中，并将localstorage用于className？

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

我的代码：

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;

瓦希德·阿赫塔尔

像这样解析 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>
    );
  }
    }

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。