React Checkbox 组件不将状态保存到 LocalStorage

Question

我正在 React 中创建一个包含复选框的组件。我希望它来回切换（打开和关闭）并将状态保存在本地存储中，这样如果我转到另一个页面，切换将设置为之前的状态。

注意：我没有使用 React 16，不能使用 state hooks

我创建了我的组件并添加了 ComponentDidMount 和 ComponentDidUpdate 函数，如下所示。

import * as React from "react";
import { Checkbox } from 'semantic-ui-react'

type Props = {
    label : string
}

type State = {
    status: boolean
}



class ChangeOrder extends React.Component<Props, State> {
    constructor(props) {
        super(props);
        this.state = {
            status: false
        }
    }

    componentDidMount() {
        localStorage.getItem('status') && this.setState({
            status: JSON.parse(localStorage.getItem('status'))
        })
    }

    

    componentDidUpdate(nextProps, nextState) {
        localStorage.setItem('status', JSON.stringify(nextState.status));
    }
    render() {
        return (
            
            <Checkbox
                
                onClick={() => this.setState({ status: !status })}
                label={this.props.label}        
                toggle

            />
        );
    }
}

export default ChangeOrder;

复选框有效，但不保存状态。

当我右键单击检查并转到 Application 并导航到 LocalStorage 时，我看到切换开关的值从 false 变为 true 但再次单击它不会 return 为假。

我希望能够保存并保持 true 和 false 之间的切换按钮状态。

Answer 1

您只需要将状态的点击事件状态设置为this.state.status，将status 值传递给checked prop 以确保输入具有预期值。另外，我不喜欢使用字符串化布尔值，而是将字符串布尔值评估为布尔类型。我构建了一个应用程序来查看 codesandbox.

Answer 2

我认为您的复选框点击功能中缺少this.status 变化

onClick={() => this.setState({ status: !status })}

至

onClick={() => this.setState({ status: !this.state.status })}

React Checkbox 组件不将状态保存到 LocalStorage

React Checkbox Component not saving state to LocalStorage

javascript

state

local-storage

reactjs

react-component