无法读取null的属性“ classList”，但可在控制台中使用

Question

我在尝试编译我的react应用程序时遇到问题。
问题是“无法读取null的属性'classList'”。

代码：

import React, { Component } from "react";

class Nav extends Component {
  showMenu() {
    document.querySelector("#menu-icon").classList.toggle("is-active");
  }

  render() {
    return (
      <nav>
        <h4>Z-LINE Meble</h4>
        <button className="hamburger hamburger--spring" id="menu-icon" type="button" onClick={this.showMenu()}>
          <span className="hamburger-box">
            <span className="hamburger-inner" />
          </span>
        </button>
        {/* <h5>Oferta</h5>
        <h5>Realizacje</h5>
        <h5>O nas</h5>
        <h5>Kontakt</h5> */}
      </nav>
    );
  }
}

export default Nav;

怎么了？
-当我在按钮上具有“ onClick”功能时，出现此错误  
-如果没有“ onClick”功能，则实际上可以通过在控制台

中键入showMenu（）内容来起作用

你知道怎么解决吗？ 谢谢您的帮助。

Answer 1

尝试

功能：

  showMenu = () => {
        document.querySelector("#menu-icon").classList.toggle("is-active");
      }

和按钮：

<button className="hamburger hamburger--spring" id="menu-icon" type="button" onClick={()=> this.showMenu()}>

Answer 2

问题出在onClick监听器中，正如文档所述：使用JSX，您需要传递一个函数作为事件处理程序。

但是当您使用时：

onClick={this.showMenu()}

要在组件成为渲染器之前调用函数，请注意最后的括号。

点击按钮后，您不应立即调用它。

您有两个选择： 1）

onClick={this.showMenu}

2）如果您需要向函数传递一些参数

onClick={() => {this.showMenu()}}