Reactjs 尝试选择一个复选框选择所有复选框

我正在尝试使用本地存储预先列出复选框…在应用该复选框之后。。。 如果我选中一个复选框选择所有复选框…我将使用映射功能选择复选框…任何一个复选框都可以帮助我…我想选中单个复选框

这是linkmof代码沙盒：

Branchs.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 = {
      value: {},
      count: 0,
      checked: localStorage.getItem("checkbox") === "true" ? true : false
    };
  }
  CheckedBox = e => {
    let checked = e.target.checked;
    let count = this.state.count;
    if (checked) {
      console.log(checked);
      this.setState({ checked: true });
      count++;
    } else {
      count--;
      console.log(checked);
      this.setState({ checked: false });
    }
    this.setState({ count });
    console.log(count);

    let values = this.state.value;
    values[e.target.value] = e.target.checked;
    this.setState({ value: values });

    localStorage.setItem("checkbox", e.target.checked.toString());
  };

  checkBoxSubmit = e => {
    e.preventDefault();
    console.log(this.state.value);
  };
  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}
                    value={a}
                    type="checkbox"
                    name={a}
                    checked={this.state.checked}
                    control={<Checkbox color="primary" />}
                    onClick={this.CheckedBox}
                  />
                </ListItem>
              ))}
            </List>
          </FormGroup>
          Count :{this.state.count}
          <br />
          <Button type="submit" variant="primary">
            Submit
          </Button>
        </form>
      </React.Fragment>
    );
  }
}

export default BranchComponent;

---

我更新了你的代码，工作正常

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";
var localStorageData = localStorage.getItem("checkbox");
// const [isChecked, setIsChecked] = useState(true);
class BranchComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: {},
      count:
        localStorageData && typeof JSON.parse(localStorageData) === "object"
          ? JSON.parse(localStorageData).length
          : 0,
      checked:
        localStorageData && typeof JSON.parse(localStorageData) === "object"
          ? JSON.parse(localStorageData)
          : []
    };
  }
  CheckedBox = (e, index) => {
    let checked = e.target.checked;
    let count = this.state.count;
    var addData = [...this.state.checked, index];
    if (checked) {
      console.log(checked);
      this.setState({ checked: [...new Set(addData)] });
      count++;
    } else {
      count--;
      console.log(checked);
      addData = addData.filter(find => find !== index);
      this.setState({ checked: addData });
    }
    this.setState({ count: addData.length });
    console.log(count);

    let values = this.state.value;
    values[e.target.value] = e.target.checked;
    this.setState({ value: values });

    localStorage.setItem("checkbox", JSON.stringify([...new Set(addData)]));
  };

  checkBoxSubmit = e => {
    e.preventDefault();
    console.log(this.state.value);
  };
  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}
                    value={a}
                    type="checkbox"
                    name={a}
                    checked={this.state.checked.includes(a)}
                    control={<Checkbox color="primary" />}
                    onClick={e => this.CheckedBox(e, a)}
                  />
                </ListItem>
              ))}
            </List>
          </FormGroup>
          Count :{this.state.count}
          <br />
          <Button type="submit" variant="primary">
            Submit
          </Button>
        </form>
      </React.Fragment>
    );
  }
}

export default BranchComponent;

---

这回答了你的问题吗？不。我想为您的答案选择单独的复选框谢谢nasir…但是…如果使用这些代码…无法在本地存储中存储值，因此您希望只存储选定的复选框值？并在本地存储中存储数据请共享示例json我将帮助您感谢nasir bro…感谢您的帮助…我在这些中遇到一个问题…如果尝试选择两个复选框…我无法执行此操作