javascript - TypeError：无法读取未定义的属性“classList”

Question

我做了一个表单登录到 React 研究......我无法解决这个错误..

TypeError：无法读取未定义的属性“classList”

我的代码错误：

changeState(){

    const {isLogginActive} = this.state;
    if(isLogginActive) {
      this.rightSide.classList.remove("right");
      this.rightSide.classList.add("left");
    } else {
      this.rightSide.classList.remove("left");
      this.rightSide.classList.add("right");
    }
    this.setState((prevState)=> ({ isLogginActive: !prevState.isLogginActive }));
  }

有人可以帮助我……有一个解决方案……在 React 中做。

谢谢。

标签： javascripthtmlcssreactjssass

Answer 1

我假设这rightSide是使用createRef API定义的属性。

在这种情况下，classList只能current通过ref.

this.rightSide.current.classList

与createRef()异步一样，如果您在早期访问它，例如在componentDidMount生命周期中，它可能会返回 null。

因此，添加 if 语句来检查总是更安全current

changeState(){
  const {isLogginActive} = this.state;
  if (this.rightSide.current) {
    if(isLogginActive) {
      this.rightSide.current.classList.remove("right");
      this.rightSide.current.classList.add("left");
    } else {
      this.rightSide.current.classList.remove("left");
      this.rightSide.current.classList.add("right");
    }
    this.setState((prevState)=> ({ isLogginActive: !prevState.isLogginActive }));
  }
}