反应 onClick 属性不触发

Question

I am trying to implement a simple component (an animated hamburger menu button). Its class needs to be updated when it is active or not. For that point, I'm using a state hook. I want to add a onClick property to this button to invert its state. But this onClick function is never firing. When I set the button active by myself, the button appearence changes as I wanted. I am using fullPage.js in my project.

I saw a lot of topic about that, but no one answered to my problem...

Thanks for future answers !

Here is my code :

import React, { useState } from 'react';
import './hamburger.css';

const MenuButton = () => {
  const [isMenuActive, setIsMenuActive] = useState(false);

  return (
    <button className={`hamburger hamburger--slider ${isMenuActive && "is-active"}`} type="button" onClick={() => setIsMenuActive(!isMenuActive)}>
      <span className="hamburger-box">
        <span className="hamburger-inner"></span>
      </span>
    </button>
  );
};

export default MenuButton;
``

Answer 1

You are starting the state with false value. So it's not firing the onClick event because it's inactive from the get go

change the initial state useState(true)

Answer 2

Ok I found the problem.

I didn't noticed that I was using React v17 (beta). I downgraded to React 16 and my button works well !