无法保留复选框

Question

当我更改组件并返回时，我无法保留复选框...只是我想保留选中的复选框

这是代码沙盒的链接：https://codesandbox.io/s/suspicious-glitter-0or0t?file=/src/components/branches.js...请看上面代码沙盒的链接...

courses.js

import React, { Component } from "react";
import Checkbox from "@material-ui/core/Checkbox";
import FormGroup from "@material-ui/core/FormGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import { List, ListItem } from "@material-ui/core";
import Button from "react-bootstrap/Button";

// const [isChecked, setIsChecked] = useState(true);
class CheckboxComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      values: {},
      count: 0,
      checked: true
    };
    this.ChangeCheckBox = this.ChangeCheckBox.bind(this);
    this.checkBoxSubmit = this.checkBoxSubmit.bind(this);
  }
  ChangeCheckBox = e => {
    let checked = e.target.checked;
    let { count } = this.state;
    let value = this.state.values;
    if (checked) {
      // console.log("checked");
      count++;
      this.setState({
        checked
      });
    } else {
      // console.log("un-checked");
      count--;
    }
    this.setState({ count });
    // console.log(count);
    // console.log(checked);
    // console.log(value);

    value[e.target.value] = e.target.checked;
    this.setState({ values: value });
  };
  checkBoxSubmit = e => {
    let CheckedValues = this.state.values;
    e.preventDefault();
    console.log(CheckedValues);
  };
  render() {
    const arr = ["Course 1", "Course 2", "Course 3"];
    return (
      <React.Fragment>
        <form onSubmit={this.checkBoxSubmit}>
          <FormGroup aria-label="position" row>
            <List className="courses-college-regis">
              {arr.map((a, key) => (
                <ListItem button key={key}>
                  <FormControlLabel
                    label={a}
                    type="checkbox"
                    value={a}
                    name={a}
                    control={<Checkbox color="primary" />}
                    onChange={this.ChangeCheckBox}
                  />
                </ListItem>
              ))}
            </List>
          </FormGroup>
          count:{this.state.count}
          <br />
          <Button type="submit" variant="primary">
            Submit
          </Button>
        </form>
      </React.Fragment>
    );
  }
}

export default CheckboxComponent;

branch.js

import React, { Component } from "react";
import Checkbox from "@material-ui/core/Checkbox";
import FormGroup from "@material-ui/core/FormGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import { List, ListItem } from "@material-ui/core";
import Button from "react-bootstrap/Button";

// const [isChecked, setIsChecked] = useState(true);
class BranchComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      values: {},
      count: 0,
      checked: true
    };
    this.ChangeCheckBox = this.ChangeCheckBox.bind(this);
    this.checkBoxSubmit = this.checkBoxSubmit.bind(this);
  }
  ChangeCheckBox = e => {
    let checked = e.target.checked;
    let { count } = this.state;
    let value = this.state.values;
    if (checked) {
      // console.log("checked");
      count++;
      this.setState({
        checked
      })
    } else {
      // console.log("un-checked");
      count--;
    }
    this.setState({ count });
    // console.log(count);
    // console.log(checked);
    // console.log(value);

    value[e.target.value] = e.target.checked;
    this.setState({ values: value });
  };
  checkBoxSubmit = e => {
    let CheckedValues = this.state.values;
    e.preventDefault();
    console.log(CheckedValues);
    localStorage.setItem('this.state.values', CheckedValues)
  };
  render() {
    const arr = ["Branch 1", "Branch 2", "Branch 3"];
    return (
      <React.Fragment>
        <form onSubmit={this.checkBoxSubmit}>
          <FormGroup aria-label="position" row>
            <List className="courses-college-regis">
              {arr.map((a, key) => (
                <ListItem button key={key}>
                  <FormControlLabel
                    label={a}
                    type="checkbox"
                    value={a}
                    name={a}
                    control={<Checkbox color="primary" />}
                    onChange={this.ChangeCheckBox}
                  />
                </ListItem>
              ))}
            </List>
          </FormGroup>
          count:{this.state.count}
          <br />
          <Button type="submit" variant="primary">
            Submit
          </Button>
        </form>
      </React.Fragment>
    );
  }
}

export default BranchComponent;

Answer 1

您需要将这些值保存到localStorage。

将您最初的 state 更改为：

this.state = {
   values: {},
   count: 0,
   checked: localStorage.getItem('checkbox') === 'true' ? true : false
};

然后在您的 ChangeCheckBox 处理程序中，在其底部添加以下行：

localStorage.setItem('checkbox', e.target.checked.toString())

这会更新您提供的 localStorage 键的值，然后将您的初始状态设置为保存在本地存储中的该键值。