Блог

Главная - Вопросы по программированию - Следующая функция onclick JS -панели навигации не определена

Следующая функция onclick JS -панели навигации не определена

#reactjs #next.js

#reactjs #next.js

Вопрос:

Я пытаюсь сделать свою навигацию адаптивной, поэтому нажатие на значок меню бургера добавит класс в навигацию. Простая концепция.

Все еще новичок в react и next js.

 import Link from 'next/link'
import { useRouter } from 'next/router'
import { useRef, setState, useEffect } from 'react'

const Nav = (props) => {

  const router = useRouter()
  
  const isExpanded = () => {
    this.state = {
      isExpanded: false
    }
  }

  function handleToggle(e) {
    e.preventDefault();
    this.setState({
      isExpanded: !this.state.isExpanded
    });
  }

  return (
    <nav>
      <div>
        <Link href="/">
          <a><img src="/img/logo.svg" /></a>
        </Link>
        <button onClick={e => this.handleToggle(e)} className="nav-icon">
          <svg className="fill-current text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
        </button>
      </div>
      
      <div>
        <ul className={`collapsed ${isExpanded ? "is-expanded" : ""}`}>
          <li className={router.pathname == "/" ? "active" : ""}>
            <Link href="./">
              <a>Home</a>
            </Link>
          </li>
          <li className={router.pathname == "/blog" ? "active" : ""}>
            <Link href="/blog">
              <a>Blog</a>
            </Link>
          </li>
        </ul>
      </div>
    </nav>
    )
  }

export default Nav

Когда я нажимаю на значок бургера в меню, я получаю
TypeError: Cannot read property 'handleToggle' of undefined

Любой совет в правильном направлении был бы высоко оценен. Спасибо

Комментарии:

1. Вы используете functional component . Она не существует this . Просто использовать handleToggle(e) было бы хорошо.

2. Ах, хорошо, спасибо — итак, я внес это изменение — теперь я не могу прочитать свойство ‘setState’ неопределенного

Ответ №1:

Вы путаете классовые и функциональные компоненты и не используете преимущества ни того, ни другого. Вот рабочий фрагмент, иллюстрирующий минимальную реализацию.

Она используется React.useState() для объявления и установки состояния. Кроме того, при вызове именованные функции event будут передаваться неявно, поэтому вы можете просто объявить onClick={handleToggle} .

 p {
  font-family: monospace;
}  
 <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<div id="App"></div>
<script type="text/babel">
  const {useState} = React;
  
const Nav = () => {
  const [isExpanded, setIsExpanded] = useState(false);

  function handleToggle(e) {
    setIsExpanded(prevState => !prevState);
  }

  return (
    <nav>
      <div>
        <button type="button" onClick={handleToggle} className="nav-icon">
          Burger
        </button>
      </div>
      <p>{`isExpanded: ${isExpanded}`}</p>
    </nav>
    )
  }

ReactDOM.render(<Nav />, document.getElementById('App'));
 </script>