อีเวนต์และการเรนเดอร์แบบมีเงื่อนไข

ตอบสนองต่อการกระทำของผู้ใช้ และแสดงหรือซ่อนอิลิเมนต์ตามเงื่อนไข

8 นาที · 3 คำถาม

อีเวนต์ (event) คือการกระทำของผู้ใช้: การคลิก การกดปุ่ม การส่งฟอร์ม... ใน React คุณฟังอีเวนต์ด้วยการส่ง ฟังก์ชัน เข้าไปใน prop พิเศษ: onClick สำหรับการคลิก onChange สำหรับการพิมพ์ และอื่น ๆ สังเกตการสะกดแบบ camelCase: onClick โดยมีตัว C พิมพ์ใหญ่ ไม่ใช่ onclick แบบใน HTML

function AlertButton() {
  function handleClick() {
    alert("Button clicked!");
  }

  return (
    <button onClick={handleClick}>
      Click here
    </button>
  );
}

เครื่องมือที่สองในบทเรียนนี้คือ การเรนเดอร์แบบมีเงื่อนไข (conditional rendering) หรือพูดอีกอย่างคือการแสดงสิ่งต่าง ๆ ที่แตกต่างกันขึ้นอยู่กับเงื่อนไข เหมือนป้ายหน้าร้านที่เขียนว่า "เปิด" หรือ "ปิด" คอมโพเนนต์สามารถเลือกได้ว่าจะแสดงอะไร เครื่องมือที่พบบ่อยที่สุดคือ ตัวดำเนินการเทอร์นารี (ternary operator): condition ? valueIfTrue : valueIfFalse ซึ่งเป็นวิธีเขียน "ถ้า... ไม่เช่นนั้น..." แบบกระชับ

function Status({ isLoggedIn }) {
  return (
    <p>
      {isLoggedIn ? "Welcome!" : "Please sign in."}
    </p>
  );
}

แล้วถ้าจะแสดงบางอย่าง หรือไม่แสดงอะไรเลย ล่ะ? คุณต้องใช้ตัวดำเนินการ &&: ใน condition && element อิลิเมนต์จะถูกแสดงก็ต่อเมื่อเงื่อนไขเป็นจริงเท่านั้น หากเป็นเท็จ React จะไม่เรนเดอร์อะไรเลย โดยไม่มีข้อผิดพลาด

function Cart({ itemCount }) {
  return (
    <div>
      <h3>My cart</h3>
      {itemCount > 0 && <p>{itemCount} item(s)</p>}
    </div>
  );
}

ทดสอบความรู้

ตรวจสอบว่าคุณจำประเด็นสำคัญของบทเรียนนี้ได้ครบถ้วน

1. คุณใช้ prop ตัวใดเพื่อตอบสนองต่อการคลิกใน React?
   • onclick
   • onClick
   • clickEvent
2. ทำไมต้องเขียน onClick={handleClick} โดยไม่ใส่วงเล็บ?
   • เพราะวงเล็บเป็นสิ่งต้องห้ามใน JSX
   • เพื่อทำให้หน้าเว็บโหลดเร็วขึ้น
   • เพื่อให้ฟังก์ชันทำงานตอนคลิก ไม่ใช่ตอนเรนเดอร์
3. {isVisible && <p>Info</p>} จะแสดงอะไรถ้า isVisible เป็น false?
   • ไม่แสดงอะไรเลย
   • ย่อหน้า Info ก็ยังถูกแสดงอยู่ดี
   • React แสดงข้อความแสดงข้อผิดพลาด