带有 onClick 的按钮在 React 中只能工作一次答案

【问题标题】：Button with onClick only works once in React带有 onClick 的按钮在 React 中只能工作一次
【发布时间】：2018-11-25 08:53:22
【问题描述】：

我需要在 React 应用程序中制作折叠菜单，但带有 onClick 的按钮只能工作一次。我创建了一个布尔变量，当我点击按钮时它应该会改变。但我只能点击按钮一次，然后<a> 不起作用，它处于非活动状态：

let isOpened = false;

class Header extends React.Component {
  handleClick = () => {
    isOpened = !isOpened;
  };

  render() {
    const path = history.location && history.location.pathname;
    return (
      <div className={s['header-left']}>
        <div className={s.button}>
          <a href="#"  onClick={this.handleClick}>
            <FontAwesomeIcon icon={faBars} />
          </a>
        </div>

还有折叠代码：

<Collapse isOpened={isOpened}>
        <nav className={`${s.menu} ${s.mobile}`}>
          <ul className={s['menu-ul']}>
            ...
          </ul>
        </nav>
      </Collapse>

【问题讨论】：

代码 sn-p Header 类和整个类中的 render 函数不完整。我猜你无意中省略了它的结尾（？）。
@ProgrammerPer 在我的代码中渲染功能完成。我把一些代码紧凑的部分收起来了

标签： javascript reactjs jsx

【解决方案1】：

您的 onClick 工作正常，但它没有重新渲染您的反应组件。您需要将isOpened 置于组件和全局变量的状态中。请阅读this

class Header extends React.Component {
  constructor(props){
      super(props);

      this.state = {isOpened: false};
  }
  handleClick = () => {
    this.setState({isOpened: !this.state.isOpened});
  };

  render() {
    const path = history.location && history.location.pathname;
    return (
      <div className={s['header-left']}>
        <div className={s.button}>
          <a href="#"  onClick={this.handleClick}>
            <FontAwesomeIcon icon={faBars} />
          </a>
        </div>
   );
 }

【讨论】：

我有一个错误 ReferenceError: isOpened isOpened is not defined Header/ { > 20 | this.setState({isOpened: !isOpened}); | ^ 21 | }; 22 | 23 |渲染（） {
更新了答案
嗯，毕竟修复按钮只能工作一次，当我在开始页面上时，光标将我的按钮突出显示为链接（它的工作）。但是当我点击按钮时，它处于非活动状态，光标将按钮突出显示为文本或图片，当我尝试点击它时，没有任何反应

【解决方案2】：

@Ajay Gaur 回答的附录

您的问题在于使用<a href="#" onClick={this.handleClick}> 当您尝试单击链接时，浏览器希望将您重定向到下一页，因为您在 a 中添加了 href="#"。所以有两种方法可以解决您的问题。

1：使用button 代替a 标签。

2：将 preventDefaul 添加到您的方法中：

handleClick = (e) => {
  e.preventDefault();
  this.setState({ isOpened: !this.state.isOpened });
};

应该有帮助。

【讨论】：

我解决了这个问题。前面的答案是对的。这将是标记的问题，菜单已结束按钮