ตอบสนอง 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-*แอตทริบิวต์ใน 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 ใช้เหตุการณ์สังเคราะห์ (wrapper สำหรับเหตุการณ์เนทีฟ) จึงมีเหตุการณ์รวมกันซึ่งหมายความว่าหากคุณต้องการใช้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