具有onClick的按钮在React中仅工作一次

时间:2018-11-25 08:53:22

标签: javascript reactjs jsx

我需要在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>

2 个答案:

答案 0 :(得分:3)

您的onClick正常运行,但没有重新呈现您的react组件。您需要将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>
   );
 }

答案 1 :(得分:0)

@Ajay Gaur的答案附录

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

1:使用button代替a标签。

2:在您的方法中添加preventDefaul:

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

应该有帮助。