SwiftUI Academy · บทเรียน

การผูก TextField กับสถานะ

เชื่อมช่องข้อความกับสตริงใน @State

บทเรียน 1 จาก 413 ขั้นตอน

การผูก TextField กับสถานะ เป็นบทเรียน SwiftUI Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน SwiftUI Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส SwiftUI Academy มีบทเรียนทั้งหมด 4 บทเรียน

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

Meet TextField

A TextField is SwiftUI's box where users type. Give it a prompt and somewhere to store what they enter, and you have live text input. ✍️

Text Needs a Home

Typed characters must go somewhere. You store them in a @State string that the text field reads from and writes to as the user types.

@State private var name = ""

The Binding Connection

A TextField needs a two-way link called a binding. It both reads the current value and writes new keystrokes back into your state.

The Dollar Sign

To pass a binding, prefix the property with $. Writing $name hands the text field a two-way connection instead of a plain copy.

TextField("Name", text: $name)

The Placeholder

The first argument is the placeholder: faint hint text shown when the field is empty. It disappears the moment the user starts typing.

TextField("Enter your name", text: $name)

Reading the Value

Because the field writes into your state, you can read name anywhere in the body to react to what the user has typed so far.

Text("Hello, \(name)")

A Bordered Look

Add the textFieldStyle modifier with .roundedBorder to give the field a clean, tappable outline instead of a bare line.

TextField("Name", text: $name)
  .textFieldStyle(.roundedBorder)

Live Updates Are Free

You never write code to refresh the screen. When the binding changes the state, SwiftUI re-renders the view automatically for you. ✨

One Source of Truth

The @State string is the single source of truth. The field and any Text that reads it always stay perfectly in sync.

Plain Value vs Binding

Writing name passes a read-only copy. Writing $name passes the binding the field needs to send edits back. The dollar sign matters.

Putting It Together

A state string, a TextField bound with $, and a Text that reads it: that is a complete, reactive input screen.

TextField("Name", text: $name)
Text("Hi, \(name)")

Quick Check

How do you give a TextField a two-way link to a @State string?

Recap

You bound a TextField to @State with the $ prefix, so typing updates your value and the UI refreshes itself. That is reactive input in a nutshell. 🎉

เริ่มต้นได้ฟรี

เรียนรู้ Swift ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส
30
บทเรียน
120

คำถามที่พบบ่อย

บทเรียน “การผูก TextField กับสถานะ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การผูก TextField กับสถานะ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส SwiftUI Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส SwiftUI Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การผูก TextField กับสถานะ”

เชื่อมช่องข้อความกับสตริงใน @State คุณปฏิบัติ SwiftUI Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน SwiftUI Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน SwiftUI Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “การผูก TextField กับสถานะ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน SwiftUI Academy นี้ได้ไหม

ได้ บทเรียน SwiftUI Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. การผูก TextField กับสถานะ
  2. ชนิดแป้นพิมพ์และข้อความตัวอย่าง
  3. SecureField สำหรับรหัสผ่าน
  4. การตรวจสอบข้อมูลนำเข้าแบบสด
← กลับไปที่ SwiftUI Academy