时间戳

首页 > 解决方案 > 简单的反应组件无法读取状态

javascript - 简单的反应组件无法读取状态

问题描述

我有一个登录组件，为了清楚起见，我将其简化为以下定义

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。我觉得我已经在构造函数中定义了状态......是否存在不会调用构造函数的实例？我在这里想念什么？

标签： javascriptreactjs

解决方案

this.onClickSignUp = this.onClickSignUp.bind(this);您在constructor函数中忘记了这一行。

推荐阅读