ReactonClick-パラメータを使用してイベントを渡します

パラメータなし

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-*、HTML5の属性を利用することがIMOの最善の解決策です。結局のところ、サブコンポーネントを抽出してパラメーターを渡しても、それでも新しい関数が作成されます。

例えば、

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)();

また、reactは合成イベント（ネイティブイベントのラッパー）を使用するため、イベントプーリングがあります。つまり、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