Why is this in click2 undefined?

    constructor() {
        super();
        this.name = "MyComponent";

        this.handleClick2 = this.handleClick1.bind(this);
    }

    handleClick1() {
        console.log(this)
        alert(this.name);
    }

    handleClick3 = () => alert(this.name);
    render() {
        return (
            <div>
                <button onClick={this.handleClick1()}>click 1</button>
                <button onClick={this.handleClick1}>click 2</button>
                <button onClick={this.handleClick2}>click 3</button>
                <button onClick={this.handleClick3}>click 4</button>
            </div>
        );
    }
}
React.js javascript
Dec.15,2021

first of all, there is something wrong with your description. The this of your click1 is undefined, not click2.

you can change your code like this. 

  
 first of all, you need to know the meaning of this definition method: the definition of 
 handleClick1 is defined on prototype, and you give it to a button directly. When it executes, you don't know which instance is calling it, so it is undefined. 
 you can use  this. HandleClick1.bind (this)  is one way to pass this in. 
 in addition, there are two other ways of writing you above, one is the arrow function, and the other is to define the function on this.

Previous: On the problem of dealing with arrays

Next: How to pass two parameters to the background when vue.js initiates a get request.

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu