多个onClick无效反应

Question

I am trying to call two multiple functions onClick.It doesn't work when i try to do it.But it works in single function.these are the two functions.

   //first function
saveValue = (e) => {
    // console.log('savecategory', e.target.innerHTML);

    this.setState({
        category: e.target.innerHTML
    }, this.makeAxiosRequest);

};

//second function

goToLastPage = () => {
    const {currentPage, pages, end} = this.state;
};

This is the onClick event i am trying to work.

<button   onclick={()=>{this.saveValue();this.goToLastPage()}}>Residence</button>

But it doesn't work.It only works if i call it as a single function like this.

<button onClick={this.saveValue}>Residence</button>

<button onClick={this.goToLastPage}>Residence</button> 

How can i make it work?

Answer 1

saveValue function needs event argument. So try this:

<button onClick={(e) => { this.saveValue(e); this.goToLastPage(); }}>Residence</button>

Also, instead onclick should be onClick

Answer 2

It's because in your first example you typed onclick instead of onClick . Notice the capitalization of C . React event handlers are camel-cased.

Answer 3

You need to use onClick instead of onclick. This is a difference in HTML and Reactjs.

For more details follow this link: https://reactjs.org/docs/handling-events.html

Also check this out: Call multiple functions onClick ReactJS

<button onClick={()=>{this.saveValue();this.goToLastPage()}}>Residence</button>