类型错误：无法读取未定义的属性“ChangeClassName”

Question

以下代码在 this.ChangeClassName 方法调用上返回 TypeError。有什么问题？我尝试在没有“这个”的情况下使用。在同一个类的另一个方法中调用嵌套方法很重要。import React from 'react'import styling from '../Login/Login.css'class Login extends React.Component {    constructor(props) {        super(props);        this.state = {            active: false,        }        this.ChangeClassName = this.ChangeClassName.bind(this);    }    ChangeClassName() {        this.setState({            active: true        });    }    LoginClick (event) {        event.preventDefault();        this.ChangeClassName();    }    render() {        return (            <div className="login-page">                <div className={ this.state.active ? 'form color-change-5x': 'form' }>                    <form className="login-form">                        <input type="text" placeholder="username" />                        <input type="password" placeholder="password" />                        <button onClick={this.LoginClick}>login</button>                    </form>                </div>            </div>        )    }}export default Login;

Answer 1

你ChangeClassName在你的构造函数中绑定，这很好。问题是你从内部调用它LoginClick。

LoginClick不受任何约束，因此this.ChangeClassName转化为调用ChangeClassName不同的范围。

也尝试为该方法添加绑定：

this.ChangeClassName = this.ChangeClassName.bind(this);
this.LoginClick = this.LoginClick.bind(this);