React onClick - evento de passagem com parâmetro

Sem Parâmetro

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

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

Com Parâmetro

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

Eu quero pegar o event. Como posso conseguir?

Experimente isto:

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

E em sua função:

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

Com o ES6, você pode fazer de forma mais curta, como este:

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

E use-o:

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

Solução 1

function clickMe(parameter, event){
}

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

Solução 2 O uso da função de vinculação é considerado melhor do que o método da função de seta, na solução 1. Observe que o parâmetro do evento deve ser o último parâmetro na função do manipulador

function clickMe(parameter, event){
}

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

Para resolver completamente o problema de criação de um novo retorno de chamada, utilizar os data-*atributos em HTML5 é a melhor solução IMO. Pois no final do dia, mesmo que você extraia um subcomponente para passar os parâmetros, ele ainda cria novas funções.

Por exemplo,

const handleBtnClick = e => {
  const { id } = JSON.parse(e.target.dataset.onclickparam);
  // ...
};

<button onClick={handleBtnClick} data-onclickparam={JSON.stringify({ id: 0 })}>

Consulte https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes para usar os data-*atributos.

Currying com ES6 exemplo:

const clickHandler = param => event => {
  console.log(param); // your parameter
  console.log(event.type); // event type, e.g.: click, etc.
};

Nosso botão, que alterna o manipulador:

<button onClick={(e) => clickHandler(1)(e)}>Click me!</button>

Se você quiser chamar esta expressão de função sem um objeto de evento, chame-a desta forma:

clickHandler(1)();

Além disso, como o react usa eventos sintéticos (um wrapper para eventos nativos), existe um pool de eventos , o que significa que, se você quiser usar seu eventobjeto de forma assíncrona, terá que usar event.persist():

const clickHandler = param => event => {
  event.persist();
  console.log(event.target);
  setTimeout(() => console.log(event.target), 1000); // won't be null, otherwise if you haven't used event.persist() it would be null.
};

Aqui está um exemplo ao vivo: https://codesandbox.io/s/compassionate-joliot-4eblc?fontsize=14&hidenavigation=1&theme=dark