我正在尝试做的事情：

Question

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

我正在尝试做的事情：

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

我的处理方法是

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

=> 我已使用布尔值启动了“状态”，并将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"}>

它根本不起作用，意味着即使切换变量从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;

Answer 1

首先-localStorage仅可容纳字符串值，因此您的标志将转换为'true'的{{1}}-两者都是正确的。您需要对数据进行序列化/反序列化：

'false'

第二件事-最好在回调函数中而不是在渲染函数中执行副作用（例如读取/写入localStorage）：

localStorage.setItem('app_data', JSON.stringify({ toggle }));
...
const { toggle } = JSON.parse(localStorage.getItem('app_data'));

Answer 2

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

Answer 3

import React from "react";
import "./DarkMode.scss";

class DarkMode extends React.Component {
  this.state = {
    darkMode: true
  };

componentDidMount() {
  if(localStorage.darkMode) {
    this.setState({...this.state, darkMode: localStorage.darkMode}) 
  }
}

handleChange = () => {
  this.setState({ ...this.state, mode: !this.state.mode });
  localStorage.darkMode = this.state.darkMode;
 };

  render() {
    return (
      <div className={this.state.darkMode ? "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;

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

我正在尝试做的事情：

我的处理方法是

正在做什么：

出了什么问题

3 个答案: