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

Это сообщение об ошибке TypeError: Невозможно прочитать свойство 'toggleShow' из неопределенного :

18 | toggleShow() {
19 |     this.toggleShow = this.toggleShow.bind(this)
   | ^  20 |     this.hide = this.hide.bind(this)
21 |     this.setState({ show: !this.state.show });
22 | }

Мой полный код реакции

import React from 'react';
import { BrowserRouter as Router, Link } from 'react-router-dom';
import Dropdown from "../components/pages/dropdowns/dropdown.js";
import hamburger from "../components/images/menu.svg";



class Navigation extends React.Component {

        constructor(props) {
            super(props);

            this.state = {
                show: false
            }
        }

        toggleShow() {
            this.toggleShow = this.toggleShow.bind(this)
            this.hide = this.hide.bind(this)
            this.setState({ show: !this.state.show });
        }

        hide(e) {
            if (e && e.relatedTarget) {
                e.relatedTarget.click();
            }
            this.setState({ show: false });
        }



    render() {
      return (
          <Router>
              <div className="FlexContainer NavbarContainer">
                  <div className="mobilecontainer LeftNav">
                      <h2 className="BrandName LeftNav mobileboxmenu inline FarRight">Kommonplaces</h2>
                      <div 
                      className="hamburger inlinev"  
                      onClick={this.toggleShow}  
                      onBlur={this.hide}>
                          <img alt="menubtn" src={hamburger}></img>
                      </div>
                  </div>

                  {
                        this.state.show &&
                    ( 
                        <ul className="NavBar">
                            <Dropdown/>    
                            <li className="RightNav"><Link to="/">Host Your Space</Link></li>
                            <li className="RightNav"><Link to="/">About Us</Link></li>
                            <li className="RightNav"><Link to0="/">Contact Us</Link></li>
                            <li className="RightNav"><Link to="/">Sign Up</Link></li>
                            <li className="RightNav"><Link to="/">Login</Link></li>
                        </ul>
                    )
                  }
               </div>
         </Router>
      );
    }
}
  export default Navigation;
0
bpdg 28 Дек 2019 в 00:33

1 ответ

Вам нужно переместить операторы bind внутри конструктора

constructor(props) {
  super(props);

  this.state = {
    show: false
  }
  this.toggleShow = this.toggleShow.bind(this)
  this.hide = this.hide.bind(this)
}

toggleShow() {
  this.setState({
    show: !this.state.show
  });
}
1
Gabriele Petrioli 28 Дек 2019 в 00:47
Я новичок в мире DAX. Я пытаюсь получить отдельные записи для нескольких столбцов в запросе DAX аналогично тому, как я это делаю в SQL. Я попытался объединить две таблицы на основе модели в конструкторе запросов, которая дала мне следующий запрос.
 – 
bpdg
28 Дек 2019 в 01:00