React复选框功能求助：无法统计选中数与获取标签名

没问题，我来帮你搞定这个计数功能！核心思路是用组件的state跟踪选中数量，再给每个复选框绑定变更事件来更新计数，同时解决你提到的无法获取标签名的问题。下面是修改后的完整代码和关键说明：

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 {
  // 初始化状态，存储选中的数量
  state = {
    selectedCount: 0
  };

  // 处理复选框选中/取消的逻辑
  handleCheckboxChange = (event) => {
    const isChecked = event.target.checked;
    // 根据选中状态更新计数：选中加1，取消减1
    this.setState(prevState => ({
      selectedCount: isChecked ? prevState.selectedCount + 1 : prevState.selectedCount - 1
    }));

    // 如果你需要跟踪具体选中了哪些项，可以用这段可选代码
    // const checkboxName = event.target.name;
    // this.setState(prevState => {
    //   if (isChecked) {
    //     return { selectedItems: [...prevState.selectedItems, checkboxName] };
    //   } else {
    //     return { selectedItems: prevState.selectedItems.filter(item => item !== checkboxName) };
    //   }
    // });
  };

  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 
                  key={a} // 必须添加key，避免React渲染警告
                  name={a} 
                  label={a} // 添加该属性显示复选框标签，同时能通过事件获取标签名
                  type="checkbox" 
                  control={<Checkbox color="primary" />} 
                  onChange={this.handleCheckboxChange} // 绑定变更事件
                />
              ))}
            </ListItem>
          </List>
        </FormGroup>
        count: {this.state.selectedCount} {/* 实时显示选中数量 */}
      </React.Fragment>
    );
  }
}

export default CheckboxComponent;

关键细节说明： #

• 状态管理：用state中的selectedCount记录当前选中的数量，初始值设为0。
• 变更事件：handleCheckboxChange方法通过event.target.checked判断复选框的状态，动态更新计数。
• 标签名获取：给FormControlLabel添加label属性后，页面会显示复选框的标签文本，同时name属性让我们能在事件中通过event.target.name获取到对应的标签名，完美解决你提到的问题。
• React规范：遍历数组渲染组件时添加key属性，这是React的强制要求，能避免不必要的重渲染和警告。

这样修改后，点击复选框时计数就会自动增减啦！

内容的提问来源于stack exchange，提问作者Manu Panduu