React onClick - передати подію з параметром

Без параметра

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

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

За допомогою параметра

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

Я хочу отримати event. Як я можу це отримати?

Спробуйте це:

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

І у вашій функції:

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

З ES6 ви можете зробити коротшим способом, як це:

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

І використовуйте його:

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

Рішення 1

function clickMe(parameter, event){
}

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

Рішення 2. Використання функції прив'язки вважається кращим, ніж спосіб функції стрілки, у рішенні 1. Зауважте, що параметр події повинен бути останнім параметром у функції обробника

function clickMe(parameter, event){
}

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

Для повного вирішення проблеми створення зворотного виклику data-*найкращим рішенням IMO є використання атрибутів у HTML5. Оскільки в кінці дня, навіть якщо ви витягнете підкомпонент для передачі параметрів, він все одно створює нові функції.

Наприклад,

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

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

Див. Https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes щодо використання data-*атрибутів.

Каррінг на прикладі ES6:

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

Наша кнопка, яка перемикає обробник:

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

Якщо ви хочете викликати цей вираз функції без об'єкта події, тоді ви б назвали його таким чином:

clickHandler(1)();

Крім того, оскільки реакція використовує синтетичні події (обгортку для власних подій), існує подія об'єднання подій , що означає, що якщо ви хочете використовувати свій eventоб'єкт асинхронно, вам доведеться використовувати 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.
};

Ось прямий приклад: https://codesandbox.io/s/compassionate-joliot-4eblc?fontsize=14&hidenavigation=1&theme=dark