React用复选框控制className报Cannot read properties of null错误如何解决

AI 小北

2026-10-6

错误原因

第一次报错是因为getClassBadge在组件渲染阶段就执行了，此时复选框DOM还未挂载到页面，document.getElementById("myCheck")返回null，读取checked属性自然触发类型错误。
第二次修改的写法不符合React语法规范：render方法只能返回单个根节点，且组件方法不能定义在render返回的JSX结构中。

正确实现方案

React中不推荐直接操作原生DOM，应该用组件状态管理交互数据，实现逻辑如下：

在state中新增字段存储复选框选中状态
给复选框绑定onChange事件，状态变化时更新state
直接用state的值动态生成span的类名

完整可运行代码

import React, { Component } from "react";
import "bootstrap/dist/css/bootstrap.min.css";

class Task extends Component {
  state = {
    task: "DevApp",
    // 存储复选框选中状态，默认未选中
    isChecked: false
  };

  // 复选框状态变更处理函数
  handleCheck = (e) => {
    this.setState({
      isChecked: e.target.checked
    });
  };

  // 动态计算类名，直接从state读取状态无需操作DOM
  getClassBadge() {
    return this.state.isChecked 
      ? "badge m-2 bg-warning" 
      : "badge m-2 bg-primary";
  }

  render() {
    return (
      <React.Fragment>
        <span className="bg-warning">{this.state.task}</span>
        <label>
          <input 
            type="checkbox" 
            id="myCheck"
            checked={this.state.isChecked}
            onChange={this.handleCheck}
          />
        </label>
        <span className={this.getClassBadge()}>Done</span>
      </React.Fragment>
    );
  }
}

export default Task;