WedX - журнал о программировании и компьютерных науках

ReactJS: невозможно прочитать свойство 'bind' неопределенного

Я попытался выяснить, как я могу использовать эти две кнопки «Вход» и «Зарегистрироваться», которые будут переключать поле «Вход и регистрация» назад вперед.

Я не мог понять... Кто-нибудь может это решить?

это мой код. Я хотел бы вызвать метод «выбранный контроллер» из элемента div. Но тогда Невозможно прочитать свойство 'bind' неопределенного.

Навигация.js

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

class Navigation extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            isExpanded: false
        };
    }

    handleToggle(e) {
        e.preventDefault();
        this.setState(prevState => ({
          isExpanded: !prevState.isExpanded, // negate the previous expanded state
        }));
      }

    render() {

        const { isExpanded } = this.state;

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


                  <ul className={`NavBar collapsed ${isExpanded ? "is-expanded" : ""}`}>
                        <Dropdown/>    
                        <li className="RightNav"><Link to="/">Host Your Space</Link></li>
                        <li className="RightNav"><Link to="/">About Us</Link></li>
                        <li className="RightNav"><Link to="/">Contact Us</Link></li>
                        <div className="btnflexright">
                        <div
                            className={"controller " + (this.state.isLoginOpen
                            ? "selected-controller"
                            : "")}
                            onClick={this
                            .showLoginBox
                            .bind(this)}>
                            Login
                        </div>

                        <div
                            className={"controller " + (this.state.isRegisterOpen
                            ? "selected-controller"
                            : "")}
                            onClick={this
                            .showRegisterBox
                            .bind(this)}>
                            Sign up
                        </div>
                        </div>
                  </ul>
               </div>
         </Router>
      );
    }
}

  export default Navigation;

Это главный экран, на котором будет отображаться форма входа и входа:

import React from 'react';
import RegisterBox from '../Forms/Register'
import LoginBox from '../Forms/Register'

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      isLoginOpen: true,
      isRegisterOpen: false
    };
  }

  showLoginBox() {
    this.setState({isLoginOpen: true, isRegisterOpen: false});
  }

  showRegisterBox() {
    this.setState({isRegisterOpen: true, isLoginOpen: false});
  }

    render() {
        return (
          <div>
            <div className="root-container">
                {this.state.isLoginOpen && <LoginBox/>}
                {this.state.isRegisterOpen && <RegisterBox/>}
            </div>
          </div>
        )
    }
}

export default App;

Форма входа и регистрации — это одно и то же, но в двух разных файлах: Login.js и Register,js. Сейчас я покажу код этого файла.

//Login Box 
import React from 'react';

class LoginBox extends React.Component {

    constructor(props) {
        super(props);
        this.state = {};
    }

      render() {
          return (
            <div>
                <div className="formContent modal-main">
                    <h2>Welcome Back <span>Brandon!</span></h2>
                    <form>                         
                        <input 
                            type="text" 
                            name="email" 
                            placeholder="Email Address" 
                        />

                        <input 
                            name="password" 
                            type="text" 
                            placeholder="Password" 

                        />

                        <div className="passContent">
                            <div className="checkingPass">
                                <input 
                                    className="inline" 
                                    type="checkbox" 
                                    name="check" 
                                    value="Remember Password"
                                />
                                <span 
                                    className="inline">
                                    Remember Password
                                </span>
                            </div>
                                <p 
                                    className="passFont">
                                    Forgot Password
                                </p>
                        </div>

                        <input 
                            className="formmbtn" 
                            type="button" 
                            name="button" 
                            alue="Login"
                        />

                        <div 
                            className="social-media-button">
                            <input 
                                className="clearbtn" 
                                type="button" 
                                name="button" 
                                value="Sign in with Facebook"
                            />

                            <div 
                                className="divider"
                            />

                            <input 
                                className="clearbtn" 
                                type="button" 
                                name="button" 
                                value="Sign in with Facebook"
                            />

                        </div>

                        <p 
                            className="passFont">
                            Don't have an account? 
                            <span>Sign up</span>
                        </p>

                    </form>
                </div>
            </div>               
          )
      }
  }

  export default LoginBox;
14.01.2020

Ответы:


1

Класс Navigation не имеет функций showRegisterBox и showLoginBox, поэтому this.showRegisterBox — это undefined (поэтому вы получаете ошибку Cannot read property 'bind' of undefined, когда выполняете this.showRegisterBox.bind() в компоненте Navigation.

Возможные решения:

Если эти функции не определены в компоненте Navigation, вам, вероятно, следует передать их в качестве реквизита при создании экземпляра Navigation. Это обычный способ взаимодействия компонента со своим родительским компонентом.

Итак, если, например, вы должны использовать свой компонент Navigation в App (где определены эти функции), вы должны сделать:

<Navigation showRegisterBox={this.showRegisterBox.bind(this)} showLoginBox={this.showLoginBox.bind(this)}/>

Затем в Navigation вы используете их так:

onClick={this.props.showRegisterBox}
14.01.2020
  • поправьте меня, если я ошибаюсь, но разве вам не нужно привязывать showRegisterBox и showLoginBox к компоненту App? 15.01.2020
  • @khuynh, ты прав, я отредактирую свой ответ, спасибо! 15.01.2020
  • @Ismael Padilla Итак, первый код будет внутри Navigation.js Большое спасибо за подробное объяснение мне это нужно 15.01.2020
  • <Navigation showRegisterBox={this.showRegisterBox.bind(this)} showLoginBox={this.showLoginBox.bind(this)}/> Я поместил это в файл home.js, где все, что я живу на домашней странице, это правильный путь 15.01.2020
  • Новые материалы

    Как создать диаграмму градиентной кисти с помощью D3.js
    Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..

    Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
    Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..

    Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
    В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..

    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..


    Для любых предложений по сайту: [email protected]