How to bind two functions to a button click in React

Question

I am trying to bind 2 functions to the same onClick event in the reactjs button.

I saw a few examples here but they did not work for me; either the syntax is different or my code logic just won't support two functions inside one button click. Here is an example of what I'm doing:

class Example extends Component {
    state = {
        test:1
    }

    //function 1
    add() {
        this.setState({
            test: this.state.test+1
        });
    }

    //function 2
    somefunc() {
        // does smthng
    }

    render() {
        return (
            <div>
                <Button color = 'success' 
                    onClick={this.add.bind(this)}>+1
                </Button>
            </div>
        )
    }
}

The code above works. But I need to be able to add the second (somefunc()) function to that onClick. Something like this:

onClick={() => {this.add.bind(this); this.somefunc.bind(this)}}

Is it possible with bind? If not, could you please explain how to call a function without the bind.

Joseph D. · Accepted Answer · 2019-10-16 01:30:43Z

1

Bind the functions in the constructor.

constructor (props) {
  super(props);
  this.add = this.add.bind(this);
  this.somefunc = this.somefunc.bind(this);
}

Or use arrow notation (no need for bind)

const add = () => { /* do something */ }
const somefunc = () => { /* do something */ }

<Button 
  onClick={this.add}
>
  +1
</Button>

UPDATE

Using both functions in one onClick

const doSomething = (e) => {
  add();
  somefunc();
}

<Button 
  onClick={this.doSomething}
>
  +1
</Button>

edited Oct 16, 2019 at 1:30

answered Oct 16, 2019 at 1:13

Joseph D.

12.2k4 gold badges40 silver badges72 bronze badges

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

4 Comments

Nikita Voevodin Over a year ago

thanks for answer , but how do i then pass both functions to 1 onClick?

Joseph D. Over a year ago

@NikitaVoevodin I've updated. basically just define a new function calling both add and somefunc.

Nikita Voevodin Over a year ago

got it. i was trying this before but it was telling me that add() and somefunc() were undefined . So, doing const add =()=>() instead of add(){} fixes that? Correct?

Joseph D. Over a year ago

@NikitaVoevodin yes or bind the functions in the constructor as suggested.

Collectives™ on Stack Overflow

How to bind two functions to a button click in React

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related