การทำปฏิกิริยาของสเตตใน React

ตอนนี้เรามาดูกันว่าการทำปฏิกิริยาทำงานอย่างไร มันทำให้เมื่อสเตตเปลี่ยนแปลง การเปลี่ยนแปลงนั้น จะแสดงผลบนหน้าจอทันที

มาดูตัวอย่างกัน สมมติว่าเรามีสเตตสำหรับชื่อ สินค้า:

jsxconst [name, setName] = useState('prod');

แสดงชื่อสินค้าในส่วน markup:

jsxreturn <div>
  <span>{name}</span>
</div>;

ตอนนี้มาสร้างปุ่ม ที่เมื่อกด สเตตของเราจะเปลี่ยนแปลง:

jsxreturn <div>
  <span>{name}</span>
  <button onClick={clickHandler}>btn</button>
</div>;

ในตัวจัดการเหตุการณ์คลิก เราใช้ฟังก์ชัน setName เพื่อตั้งชื่อใหม่ให้สินค้า:

jsxfunction clickHandler() {
  setName('xxxx');
}

มารวบรวมโค้ดทั้งหมดของเราเข้าด้วยกัน จะได้ว่า หลังจากกดปุ่ม ข้อความจะเปลี่ยนเป็น ค่าใหม่ทันที:

jsxfunction App() {
  const [name, setName] = useState('prod');
  
  function clickHandler() {
    setName('xxxx');
  }
  
  return <div>
    <span>{name}</span>
    <button onClick={clickHandler}>btn</button>
  </div>;
}

การใช้ฟังก์ชันแยกเป็นตัวจัดการ ไม่จำเป็นเสมอไป สามารถใช้ฟังก์ชันลูกศรแบบไม่ระบุชื่อได้:

jsxfunction App() {
  const [name, setName] = useState('prod');
  
  return <div>
    <span>{name}</span>
    <button onClick={() => setName('xxxx')}>btn</button>
  </div>;
}