How to call method inside the same class in ReactJS?

Question

I want to call the method inside the same class. For example, when I click a button, it will trigger the method handleLoginBtnClicked(). I expect it will call the method checkInputValidation() in the same class. What is the proper way to do this?

export default class LoginCard extends React.Component {

    //If I click a button, this method will be called.
    handleLoginBtnClicked() {
        this.checkInputValidation();
    }

    checkInputValidation() {
        alert("clicked");
    }
    ...
    ...
    ...
    render() {
        ...
        <LoginBtn onClick={this.handleLoginBtnClicked}/>
        ...
    }
}

Error Message:

Uncaught TypeError: this.checkInputValidation is not a function

Casper LI · Accepted Answer · 2016-07-01 07:02:52Z

8

You will need to bind those functions to the context of the component. Inside constructor you will need to do this:

export default class LoginCard extends React.Component {
    constructor(props) {
        super(props);
        this.handleLoginBtnClicked = this.handleLoginBtnClicked.bind(this);
        this.checkInputValidation = this.checkInputValidation.bind(this);
    }

    //This is the method handleLoginBtnClicked
    handleLoginBtnClicked() {
        ...
    }

    //This is the method checkInputValidation 
    checkInputValidation() {
        ...
    }

    ...
    ..
    .
}

edited Jul 1, 2016 at 7:02

Casper LI

4,82311 gold badges45 silver badges76 bronze badges

answered Jun 28, 2016 at 16:12

Elod Szopos

3,52624 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

lux Over a year ago

Any reason you chose to not do this in the constructor?

Elod Szopos Over a year ago

@CasperLI This would be one of the best practices that there are. For more information you can follow the link here

bitten · Accepted Answer · 2016-06-29 08:42:56Z

2

Where are you binding the handleLoginBtnClicked? You may be losing the functions context and losing the meaning of the special variable this. React will handle and trigger the onClick event, calling the function from a different context which is why it has been lost.

You should use the following syntax to create a new bound function to add as the event listener for the onClick event. This will ensure that handleLoginBtnClicked's context is not lost.

<element onClick={this.handleLoginBtnClicked.bind(this)}>

edited Jun 29, 2016 at 8:42

answered Jun 28, 2016 at 16:13

bitten

2,5532 gold badges28 silver badges46 bronze badges

Collectives™ on Stack Overflow

How to call method inside the same class in ReactJS?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related