React onClick - pass event with parameter

Question

Without Parameter

function clickMe(e){
  //e is the event
}

<button onClick={this.clickMe}></button>

With Parameter

function clickMe(parameter){
  //how to get the "e" ?
}
<button onClick={() => this.clickMe(someparameter)}></button>

I want to get the event. How can I get it?

Answer 1

Try this

<button onClick={(e) => {
     this.clickMe(e, someParameter)
}}>Click Me!</button>

And in your function

function clickMe(event, someParameter){
     //do with event
}

Answer 2

With the ES6, you can do in a shorter way like this:

const clickMe = (parameter) => (event) => {
    // Do something
}

Ans use it:

<button onClick={clickMe(someParameter)} />

Answer 3

Solution 1

function clickMe(parameter, event){
}

<button onClick={(event) => {this.clickMe(someparameter, event)}></button>

Solution 2 Using the bind function is considered better, than the arrow function way, in solution 1. Note, that the event parameter should be the last parameter in the handler function

function clickMe(parameter, event){
}

<button onClick={this.clickMe.bind(this, someParameter)}></button>