Блог

У меня есть компонент входа в систему, который я сократил до следующего определения для ясности

 import React from "react";

export default class LoginComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            userName: '',
        };
        this.updateUserName = this.updateUserName.bind(this);
    }

    onClickSignUp() {
        console.log(this.state);
        alert("clicked sign up with value: username="   this.state.userName);
    }
    updateUserName(e) {
        console.log(e);
        this.setState({
            userName: e.target.value
        });
    }

    render() {
        return (
            <div className="LoginComponent">
                <h1>Welcome!</h1>

                <div className="UserNameSegment">
                    <text>UserName: </text>
                    <input id="UserNameInput" value={this.state.userName} onChange={e => this.updateUserName(e)} />
                </div>

                <div className="ButtonGroup">
                    <button id="SignUpButton" onClick={this.onClickSignUp}>Sign Up</button>
                </div>
            </div>
        );
    }
}

  

Предполагаемая функциональность заключается в том, что когда я нажимаю кнопку регистрации, отображается предупреждение, информирующее меня об имени пользователя, которое было введено во ввод. В настоящее время, когда я ввожу некоторый текст и нажимаю кнопку регистрации, приложение выходит из строя и сообщает мне, что я не определил состояние LoginComponent : Uncaught TypeError: Cannot read property 'state' of undefined . Я чувствую, что я определил состояние в конструкторе… существуют ли случаи, когда конструктор не вызывался? Чего мне здесь не хватает?

Вы забыли эту строку this.onClickSignUp = this.onClickSignUp.bind(this); в constructor функции.

Измените onClickSignUp на:

 onClickSignUp = () => {
    console.log(this.state);
    alert("clicked sign up with value: username="   
this.state.userName);
}