单击 React.js 中的按钮时删除活动的 class

Question

I have 3 different element of toggle buttons and Nav. How do I remove all actived class except that I just clicked?

Also I want to remove actived class when click body section. What Do I need to change the code?

This is what I tried so far now.

export default function Page() { 
  const [show, setShow] = React.useState(); 
  const [show2, setShow2] = React.useState(); 
  const [show3, setShow3] = React.useState(); 
  return (
    <>
      <button className={`toggle1 ${show ? "toggle-active1" : ""}`} onClick={() => setShow(!show)}>
        Toggle1
      </button>
      <nav className={`btn-toggle1 ${show ? "btn-active1" : ""}`}>Navigation menu</nav>
      <button className={`toggle2 ${show2 ? "toggle-active2" : ""}`} onClick={() => setShow2(!show2)}>
        Toggle2
      </button>
      <nav className={`btn-toggle2 ${show2 ? "btn-active2" : ""}`}>Navigation menu2</nav>
      <button className={`toggle3 ${show3 ? "toggle-active3" : ""}`} onClick={() => setShow3(!show3)}>
        Toggle3
      </button>
      <nav className={`btn-toggle3 ${show3 ? "btn-active3" : ""}`}>Navigation menu3</nav>
    </>
  );
}

Answer 1

The quickest solution will be to use:

const handleClick = (active) => {
  active !== 'ID_1' && setShow(!show)
  active !== 'ID_2' && setShow2(!show2)
  active !== 'ID_2' && setShow3(!show3)
}
    
onClick={() => handleClick('ID_1')}

Or you can storing name of the active element in state (I think it's a better aproach):

const [active, setActive] = useState('')

onClick={() => setActive('ID_1')}
className={`toggle1 ${active === 'ID_1' ? "toggle-active1" : ""}`}

Replace ID_1, ID_2, etc. with your custom identifier.