类型错误：无法读取未定义的属性“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&nbsp;=&nbsp;this.ChangeClassName.bind(this); this.LoginClick&nbsp;=&nbsp;this.LoginClick.bind(this);