State ใน React คือ ข้อมูลที่เก็บอยู่ใน Component เมื่อค่าใน State มีการเปลี่ยนแปลงทุกๆ ครั้ง React จะเรนเดอร์เนื้อหาใน Component ใหม่ทันที
การกำหนดค่าเริ่มต้นให้กับ State
State สามารถเก็บข้อมูลทั่วไป เช่น ข้อความ (String) ตัวเลข (Number) ค่าความจริง (Boolean) อาร์เรย์ (Array) หรือจะเป็น ออบเจ็กต์ (Object) และก่อนจะใช้ได้ก็ต้องกำหนดค่าเริ่มต้นให้ State ก่อน มาการกำหนดตัวอย่างกัน
การกำหนด State แบบที่ 1 แบบง่าย เราสามารถอ้างอิงค่า dogName ที่อยู่ใน state โดย state.dogName ได้เลย age ก็เช่นกัน
การกำหนดค่า State แบบที่ 2 แบบมีโครงสร้างข้อมูล สามารถเก็บข้อมูลที่เป็น อาร์เรย์ได้
NOTE อย่าลืม!! npm start เพื่อสั่งให้รันโปรแกรม ทุกครั้งที่เข้ามาทำงานการใช้ State ใน ClassComponent
เราจะสร้างไฟล์ขึ้นมาใหม่ ชื่อว่า State.js ที่ src และเราสร้างเป็น ClassComponent กำหนดค่าเริ่มต้นให้กับ พร็อพเพอร์ตี้ state และให้แสดงค่าออกมา {this.state.dogName}
และให้ไปที่ไฟล์ App.js เพื่อแทรกเอลิเมนต์ <State /> ลงไปเพื่อให้แสดงผลที่เบราว์เซอร์ บันทึกและไปดูผลลัพธ์
จะได้ผลลัพธ์ออกมาดังนี้
หรือจะกำหนดค่าเริ่มต้นให้กับ State ใน ClassComponent โดยใช้ constructor() ก็ได้ผลลัพธ์ออกมาแบบเดียวกัน ดังไฟล์นี้
และไปผ่านค่า props ที่ ClassComponent ไฟล์ App.js แก้ไขนิดหน่อย ที่แท็ก <State> </State>
การใช้งาน state ใน ClassComponent เมื่อเราคลิกปุ่ม ชื่อจะเปลี่ยนไป ให้ไปที่ไฟล์ State.js ส่วนที่ไฟล์ App.js ยังคงเหมือนเดิม บันทึกและไปดูผลลัพธ์
ผลลัพธ์ที่ได้ ก่อนคลิกและหลังคลิก ชื่อจะมีการเปลี่ยนแปลง
การใช้งาน state ใน FunctionComponent
React ตั้งแต่เวอร์ชัน 16.8 ขึ้นไป สามารถกำหนดและใช้งาน state กับ FunctionComponent ผ่านทาง useState และต้อง อิมพอร์ต {useState} จาก react ค่อยเรียกใช้ useState() เหมือนกับฟังก์ชัน การส่งค่ากับมาหรือค่าที่รีเทิร์น จะเป็น อาร์เรย์ มี 2 ค่า object ที่เก็บข้อมูลของ state และ ฟังก์ชันที่ใช้อัพเดต state
การใช้งานจะมีรูปแบบ
มาลองเขียนกัน ให้เราไปคลิกขวา src > New File มาให้ > ตั้งชื่อไฟล์ว่า StateFunction.js และ เขียนโค้ดดังนี้ เราจะสร้างเป็นลิงค์เวลาคลิก url จะมีการเปลี่ยนแปลง
เมื่อเขียนเสร็จแล้ว ให้เราไปที่ไฟล์ App.js เพิ่มเอลิเมนต์ <StateFunction /> บันทึกและไปดูผลลัพธ์
ผลลัพธ์ที่ได้ จะได้ประมาณนี้
มาดูตัวอย่างการอัพเดท state ใน FunctionComponent
หลังจากที่เราได้กำหนดค่าให้กับ state แล้ว ทีนี้เราจะอัพเดทค่าให้โดยตรง เราจะสร้างแบบทดสอบมาหนึ่งตัวคือ เมื่อเราคลิกเพิ่มตัวเลขจะบวก เมื่อเราคลิกลบ ตัวจะลดลง
ให้เราไปคลิกขวา src > New file > ตั้งชื่อไฟล์ว่า StateReact.js [อันนี้ก็แล้วจะตั้ง] และเขียนโค้ดประมาณนี้
เมื่อเสร็จแล้วให้ไปที่ไฟล์ App.js เพิ่มเอลิเมนต์ <StateReact /> บันทึกและไปดูผลลัพธ์
มาดูผลลัพธ์กัน ตามที่ต้องการ
บ๊ายยย ไว้จะมาต่อเกี่ยวกับการแสดงข้อมูลใน Component นะจ๊ะ อาบน้ำเตรียมกลับบ้านเฮาแป๊บ Go Go
