在 React.js 中单击按钮时出现“切换未定义”消息

Question

I am newbie in React js, and I have made a toggle class button in Reactjs.

But When I clicked i got error message.

TypeError: Cannot read property 'toggle' of undefined

This is my code below. What is wrong with my code? please help.

import React from 'react'

export default function About() {   
  const navRef = React.useRef(null);
  const btnRef = React.useRef(null); 
  const onToggleClick = () => {
    navRef.current.classList.toggle("show");
    btnRef.current.classList.toggle("active");
  };
  return (
    <>  
      <button onClick={onToggleClick} ref={btnRef}>Toggle</button>
      <nav ref={navRef}>Navigation menu</nav>
    </>
  );
}

Answer 1

In react, you can learn to toggle by using state.

In the following example, we set a toggle state show , and toggle it true/false .

We will then set the className with the appropriate css class we want it to have.

import React, { useState, useEffect } from 'react'


export default function About() {   
  const [ show, setShow ] = useState(false) //default to hide

  useEffect(() => {
       if (show) {
          document.body.classList.add('bodyclass');
       } else {
          document.body.classList.remove('bodyclass');
       }
  }, [show])
  const onToggleClick = () => setShow(!show) //if it's true, set to false. vice-versa
  return (
    <>  
      <button onClick={onToggleClick} className={ show ? 'active' : ''}>Toggle</button>
      <nav className={ show ? 'show' : ''}>Navigation menu</nav>
    </>
  );
}