ReactJS onClick event cant call its function-CodePudding

I have problem here with this.greet() is undefined i have to bind onlick event dirrently to work, any ideas how to fix it ?

import React from 'react';

export default class Example1 extends React.Component {
    constructor() {
        super();
        this.message = {
            greeting: 'Hello',
            name: 'World',
        };
    }

    greet() {
        const { greeting, name } = this.message;
        console.log(`${greeting} ${name}!`);
    }

    onClick() {
        try {
            this.greet();
        } catch (e) {
            console.error('Why have I failed? Can you fix me?');
        }
    }
    
    render() {
        return (
            <div>
                <button onClick={this.onClick}>Greet the world</button>
            </div>
        );
    }
}

i have tried many other ways but it didnt work out anyway.

CodePudding user response：

You lost this reference, you have to bind your functions:

<button onClick={this.onClick.bind(this)}>Greet the world</button>

or pass an arrow function

<button onClick={() => this.onClick()}>Greet the world</button>

CodePudding user response：

The reason you are getting undefined as a value for this.greet() is because the this keyword in JS references the current object and in this case it doesn't exist and so .greet() method is actually attached to the window object. The solution you used as you described with binding works because bind attached the method to the current object context. Now, if you don't want to bind methods, you can use arrow functions like so:

import React from 'react';

export default class Example1 extends React.Component {
    constructor() {
        super();
        this.message = {
            greeting: 'Hello',
            name: 'World',
        };
    }

    greet = () => {
        const { greeting, name } = this.message;
        console.log(`${greeting} ${name}!`);
    }

    onClick = () => {
        try {
            this.greet();
        } catch (e) {
            console.error('Why have I failed? Can you fix me?');
        }
    }
    
    render() {
        return (
            <div>
                <button onClick={this.onClick}>Greet the world</button>
            </div>
        );
    }
}

This works because the value of this is inherited into the local scope of the methods of the component class.

CodePudding user response：

if you want have "this" in your class component you should add props inside constructor invocation and also into the super

constructor(props) {
    super(props);
    this.greet = this.greet.bind(this) // need's to be bounded
}

CodePudding user response：

First your function signature should be descriptive and then you can call the function like this

                <button onClick={this.onClick()}>Greet the world</button>

CodePudding user response：

Problem is this keyword. This is because of the way this works in javascript.

this loses it's context when it gets used in callbacks.

There are two solutions for this problem. But I would recommend the arrow function solution the most.

Bind this in the onClick callback.

 onClick() {
     try {
         this.greet();
     } catch (e) {
         console.error('Why have I failed? Can you fix me?');
     }
 }

 render() {
     return (
         <div>
             <button onClick={this.onClick.bind(this)}>Greet the world</button>
         </div>
     );
 }

Use arrow functions for defining callbacks, ( personally recommended )

 onClick = () => {
     try {
         this.greet();
     } catch (e) {
         console.error('Why have I failed? Can you fix me?');
     }
 }

 render() {
     return (
         <div>
             <button onClick={this.onClick}>Greet the world</button>
         </div>
     );
 }