试图选择一个复选框,选中所有复选框

我正在尝试使用本地存储来保留复选框...应用那个之后... 如果我选中一个复选框,则选中所有复选框...我使用复选框的地图功能...对此有任何帮助.....我想选择单个复选框

this is the linkmof code sand box : https://codesandbox.io/s/sparkling-wind-rmz1z?file=/src/App.js

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 = {
      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";
    
    // 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,index) => {
        let checked = e.target.checked;
        let count = this.state.count;
        if (checked) {
          console.log(checked);
          this.setState({ [`${index}_checked`]: true });
          count++;
        } else {
          count--;
          console.log(checked);
          this.setState({[ `${index}_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[`${key}_checked`]}
                        control={<Checkbox color="primary" />}
                        onClick={(e)=>this.CheckedBox(e,key)}
                      />
                    </ListItem>
                  ))}
                </List>
              </FormGroup>
              Count :{this.state.count}
              <br />
              <Button type="submit" variant="primary">
                Submit
              </Button>
            </form>
          </React.Fragment>
        );
      }
    }
    
    export default BranchComponent;
    

    enter image description here