ทำ tab ใน react ด้วยการ set state

พูดถึงการทำ tab เป็นของที่ frontend ที่เขียน code มาซักระยะจะต้องได้พบเจอกันทุกคน ไม่ว่าจะจะใช้ script สำเร็จรูปมาช่วย (เช่น https://jqueryui.com/tabs/ ) หรืออาจจะใช้ attr check ของ radio ใน css เข้ามาช่วยในการทำ (แบบนี้ https://codepen.io/llgruff/pen/ZGBxOa) แล้วแต่ case ที่จะต้องเจอและเลือกใช้

แล้วถ้าเป็น react หละ เราจะใช้ท่าไหน ?

ลืมการเขียนโดยใช้ jquery หรือ css ไปได้เลยค่ะ เพราะ react มีวิธีการเขียน tab ที่ง่ายกว่านั้น เพียงแค่ก่อนอื่นเราจะต้องเข้าใจระบบการทำงานของมันซะก่อน

props กับ state สิ่งสำคัญที่ต้องเข้าใจก่อนไปต่อ

ใช่แล้วค่ะ เนื่องจากว่าเราจะใช้หนึ่งในนี้เป็นตัวเช็ค tab กัน แต่เราต้องเข้าใจก่อนว่าพวกมันต่างกันยังไงดังนี้ค่ะ

props เป็น data ที่สามารถส่งจาก component แม่สู่ component ลูกได้ สามารถใช้ได้กับทั้ง stateless component และ pure component เลยค่ะ

state เป็น data ที่ใช้ใน component นั้นๆ เท่านั้น ถ้าเราจะใช้ state จะต้องเขียน component แบบ pure component เท่านั้นค่ะ

(อ่านต่อได้ที่ สวัสดีครับ ผมมีชื่อว่า “React” )

stateless component และ pure component คืออะไร ?

การเขียน component นั้นจะมีอยู่สองแบบคือ

Stateless Component หรือ component ที่รับข้อมูลเข้ามาแล้วแสดงผลเพียงอย่างเดียว ไม่มีการใช้ state เขียนดังนี้

Stateless Component

Pure component เป็น component ที่จะสามารถใช้ Lifecycle ของ react ได้ จะเขียนต่างกับ stateless ดังนี้

Pure component

(อ่านและทำความเข้าใจเพิ่มเติมได้ที่ React life cycle มันคืออะไร ???)

แล้วจะสร้าง tab ยังไงหละ ?

จะใช้การ set state เข้ามาเช็ค data ภายใน component นี้ค่ะ แต่จะทำยังไงนั้นมาลองดูตัวอย่างกันเลยค่ะ

pure component ชื่อ TabTest

เริ่มจากสร้าง pure component ชื่อ TabTest โดยเราจะสร้าง button tab 1 และ button tab 2 กับ div ที่มี content 1 และ 2 ไว้ค่ะ

ผลที่ได้จาก TabTest

จากนั้นให้เราเขียน state เพื่อเป็นการตั้งค่าเริ่มต้น activeTab ค่ะ ในตอนนี้เราจะตั้งให้ activeTab = tab1 นะคะ

ประกาศ state

หลังจากนั้นเราจะมาเช็คกันว่า tab ไหนเป็น tab 1 โดยการใช้ if this.state.activeTab ว่ามีค่าเท่ากับ tab 1 หรือไม่ ถ้าใช่ให้แสดง Content 1 ค่ะ

เขียนเงื่อนไขเช็คให้แสดง Content 1

ผลที่ได้คือจะ render เฉพาะ Content 1 เนื่องจาก state ตรงกับเงื่อนไขค่ะ โดยถ้าหาก เปลี่ยนค่า activeTab จาก tab1 เป็น tab2 ในส่วนนี้ก็จะ render เฉพาะ Content 2 เช่นกันค่ะ

ผลที่ได้คือจะ render เฉพาะ Content 1

ทีนี้เราจะมาทำให้ tab นั้นสามารถกดสลับกันได้ดังนี้ค่ะ

เพิ่ม onClick ที่ button

เราจะใช้คำสั่ง onClick (เหตุการณ์ที่เกิดจากการคลิกเมาส์) แล้วให้เมื่อกดปุ่มนั้นๆ แล้ว setState ให้เป็น tab1 และ tab2 ค่ะ เท่านี้เราก็จะสามารถกดเพื่อให้ state นั้น active ได้แล้วค่ะ

ผลที่ได้ถ้าเรากด tab 2 จะแสดง Content 2

ในส่วนของการ set active button นั้นก็ง่ายมากค่ะ โดยเราจะเขียนเช็คไว้ที่ className เหมือนกับการเช็ค Content ดังนี้ค่ะ

การเขียนเช็ค active tab button

โดยเราจะเขียน style ของ className=”active” ไว้แล้วหลังจากนั้นเราจะใช้วิธี 
if this.state.activeTab เหมือนเดิมค่ะ โดยถ้ามีค่าตรงกันแล้วให้เปลี่ยน className เป็น active ค่ะ

ผลเมื่อกด tab2

เท่านี้เอง ไม่ยากเลยใช่ไหมคะ แต่ถ้าจะเขียนให้เรียบร้อยก็เพิ่ม e.preventDefault() เพื่อหยุดการเกิดเหตุการณ์ของ browser

เพิ่ม e.preventDefault()

ข้อดีของการเขียนด้วยวิธีนี้ก็คือ การ render ของค่ะ ถ้าหากเงื่อนไขไม่ตรงกับ state ที่เราตั้งไว้ content ก็จะไม่ถูก render ออกมาด้วย ซึ่งจะต่างกับการทำ tab ด้วย css ที่เราจะซ่อนของด้วย style display: none; แต่จะโหลดของทั้งหมดออกมาในครั้งแรกด้วยค่ะ เพราะงั้นรับรองได้ว่าโหลด tab ไวกว่าเดิมแน่นอน

สามารถดูตัวอย่าง tab ของจริงได้ที่ กล่องตลาดหุ้นของ https://www.sanook.com ได้เลยค่ะ

https://www.sanook.com/money/investment/#stock