React onClick - pasar evento con parámetro

Sin parámetro

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

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

Con parámetro

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

Quiero conseguir el event. ¿Cómo puedo obtenerlo?

Prueba esto:

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

Y en tu función:

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

Con el ES6, puede hacer de una manera más corta como esta:

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

Y úsalo:

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

Solución 1

function clickMe(parameter, event){
}

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

Solución 2 El uso de la función de vinculación se considera mejor, que la forma de la función de flecha, en la solución 1. Tenga en cuenta que el parámetro de evento debe ser el último parámetro en la función de controlador

function clickMe(parameter, event){
}

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

Para resolver completamente el problema de creación de una nueva devolución de llamada, utilizar los data-*atributos en HTML5 es la mejor solución en mi opinión. Dado que al final del día, incluso si extrae un subcomponente para pasar los parámetros, aún crea nuevas funciones.

Por ejemplo,

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 data-*atributos.

Ejemplo de curry con ES6:

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

Nuestro botón, que cambia el controlador:

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

Si desea llamar a esta expresión de función sin un objeto de evento, la llamaría de esta manera:

clickHandler(1)();

Además, dado que react usa eventos sintéticos (una envoltura para eventos nativos), hay una agrupación de eventos , lo que significa que, si desea usar su eventobjeto de forma asincrónica, entonces tendrá 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.
};

Aquí hay un ejemplo en vivo: https://codesandbox.io/s/compassionate-joliot-4eblc?fontsize=14&hidenavigation=1&theme=dark