复选框的数量，无法获取复选框的标签答案

【问题标题】：count of check boxes and unbale to get label of check box复选框的数量，无法获取复选框的标签
【发布时间】：2020-08-25 02:53:39
【问题描述】：

我有一个复选框列表......我只需要计算选中复选框的数量......如果我选中的数量应该增加，如果我未选中的数量应该减少......我也没有得到标签名称。 ....可以在这些方面提供任何帮助..请..

这是代码沙盒的链接：https://codesandbox.io/s/charming-margulis-wwbip?file=/src/App.js:265-318

CheckboxComponent.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";

class CheckboxComponent extends Component {
  render() {
    const arr = ["Checkbox1", "Checkbox2", "Checkbox3"];
    return (
      <React.Fragment>
        <FormGroup aria-label="position" row>
          <List className="courses-college-regis">
            <ListItem button>
              {arr.map(a => (
                <FormControlLabel
                  name={a}
                  type="checkbox"
                  control={<Checkbox color="primary" />}
                />
              ))}
            </ListItem>
          </List>
        </FormGroup>
        count:
      </React.Fragment>
    );
  }
}

export default CheckboxComponent;

【问题讨论】：

标签： reactjs

【解决方案1】：

您需要首先处理复选框上的 onChange 事件，以确定何时选中或取消选中某个框。您可以为此使用钩子将选中的框存储到数组中，但首先您需要将类转换为函数。

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";


const CheckboxComponent = () => {
  const arr = ["Checkbox1", "Checkbox2", "Checkbox3"];
  const [ checkedBoxes, setCheckedBoxes ]= React.useState([])
  const onChange = (name, e) => {
    const isChecked = e.target.checked
    if (isChecked) {
      setCheckedBoxes(checkedBoxes.concat(name))
    } else {
      setCheckedBoxes(checkedBoxes.filter(x => x !== name))
    }
  }
  return (
    <React.Fragment>
      <FormGroup aria-label="position" row>
        <List className="courses-college-regis">
          <ListItem button>
            {arr.map(a => (
              <FormControlLabel
                key={a}
                name={a}
                type="checkbox"
                control={<Checkbox color="primary" onChange={onChange.bind(undefined, a)} />}
              />
            ))}
          </ListItem>
        </List>
      </FormGroup>
      count: {checkedBoxes.length}
    </React.Fragment>
  );
}

export default CheckboxComponent;

【讨论】：

非常感谢 rob...我也无法获得标签...请您帮忙
标签是什么意思？我假设标签是 arr 中的值（即 Checkbox1）。你想改用 FormControlLabel 吗？

【解决方案2】：

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";

// const [isChecked, setIsChecked] = useState(true);
class CheckboxComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      checked: true
    };
  }
  ChangeCheckBox = e => {
    let checked = e.target.checked;
    let { count } = this.state;
    if (checked) {
      console.log("checked");
      count++;
    } else {
      console.log("un-checked");
      count--;
    }
    this.setState({ count });
    console.log(count);
  };
  render() {
    const arr = ["Checkbox1", "Checkbox2", "Checkbox3"];
    return (
      <React.Fragment>
        <FormGroup aria-label="position" row>
          <List className="courses-college-regis">
            {arr.map(a => (
              <ListItem button>
                <FormControlLabel
                  label={a}
                  type="checkbox"
                  control={
                    <Checkbox color="primary" onChange={this.ChangeCheckBox} />
                  }
                />
              </ListItem>
            ))}
          </List>
        </FormGroup>
        count:{this.state.count}
      </React.Fragment>
    );
  }
}

export default CheckboxComponent;

【讨论】：