Javascript React无法读取null的属性答案

【问题标题】：Javascript React Cannot read properties of nullJavascript React无法读取null的属性
【发布时间】：2021-10-31 05:51:42
【问题描述】：

我正在尝试使用一个复选框来动态更改另一个标签的类名。有我的代码：

import "bootstrap/dist/css/bootstrap.min.css";
class Task extends Component {
  state = {
    task: "DevApp",
  };

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

  getClassBadge() {
    var x = document.getElementById("myCheck").checked;
    if (x) {
      return "badge m-2 bg-warning";
    } else {
      return "badge m-2 bg-primnary";
    }
  }
}

export default Task;

我明白了 TypeError: Cannot read properties of null (reading 'checked')

我试过这种方法：

  render() {
    return (
      <React.Fragment>
        <span className="bg-warning">{this.state.task}</span>
        <label>
          <input type="checkbox" id="myCheck" />
        </label>
        <span className={this.getClassBadge()}>Done</span>]
      </React.Fragment>
      <script>
        getClassBadge() {
          var x = document.getElementById("myCheck").checked;
          if (x) {
            return "badge m-2 bg-warning";
          } else {
            return "badge m-2 bg-primnary";
          }
        }
      </script>
    );
  }

但所有内容都带有红色下划线。我想要一个复选框，如果选中该复选框，则下一个跨度的 className 将更改为具有很酷的效果。有人可以帮帮我吗？如果它非常基本，我很抱歉，但我才刚刚开始:)

【问题讨论】：

欢迎来到 SO！我无意冒犯，但您可能需要花一些时间阅读一些 React 教程，以更好地理解工作流程。 一般来说，在使用 React 时，您不应该直接进行 DOM 查询或操作——如果您看到 document.getElementById 或类似的东西，这很好地表明您可能正在遵循反模式。 React（以及大多数 MV* 库）的想法是，您拥有一个数据模型，然后将 UI 连接到该数据模型，然后您只需更新数据模型，UI 就会相应地更新。
我建议你浏览一些包含复选框的实际反应代码。因为这不是正确的做法。

标签： javascript css reactjs checkbox

【解决方案1】：

TypeError: Cannot read properties of null (reading 'checked') 的出现是因为当您第一次渲染时，带有该 ID 的复选框尚未安装到 DOM。因此，document.getElementById("myCheck") 返回 null。

在大多数情况下，使用 React 你不应该使用文档对象的函数。

您应该改用 React 的状态。由于您使用的是类组件，因此您可以使用 this.state 来拥有一个属性，该属性的值告诉您是否选中了复选框。该复选框需要一个更改处理程序，例如

<input type="checkbox" id="myCheck" onChange={(state) => this.setState({isChecked: !state.isChecked})} />

然后在getClassBadge，简单检查状态：

return this.state.isChecked
  ? "badge m-2 bg-warning"
  : "badge m-2 bg-primnary"

【讨论】：