ปฏิกิริยาเหตุการณ์

ตอบสนอง:

<button onClick={shoot}>Take the Shot!</button>

HTML:

<button onclick="shoot()">Take the Shot!</button>

ตัวอย่าง:

ใส่shootฟังก์ชันภายใน Footballส่วนประกอบ:

function Football() {
  const shoot = () => {
    alert("Great Shot!");
  }

  return (
    <button onClick={shoot}>Take the shot!</button>
  );
}

ReactDOM.render(<Football />, document.getElementById('root'));

ตัวอย่าง:

ส่ง "เป้าหมาย!" เป็นพารามิเตอร์ของshoot ฟังก์ชันโดยใช้ฟังก์ชันลูกศร:

function Football() {
  const shoot = (a) => {
    alert(a);
  }

  return (
    <button onClick={() => shoot("Goal!")}>Take the shot!</button>
  );
}

ReactDOM.render(<Football />, document.getElementById('root'));

ตัวอย่าง:

ฟังก์ชั่นลูกศร: ส่งวัตถุเหตุการณ์ด้วยตนเอง:

function Football() {
  const shoot = (a, b) => {
    alert(b.type);
    /*
    'b' represents the React event that triggered the function,
    in this case the 'click' event
    */
  }

  return (
    <button onClick={(event) => shoot("Goal!", event)}>Take the shot!</button>
  );
}

ReactDOM.render(<Football />, document.getElementById('root'));