Langkau ke kandungan
WANCODE
EN

Borang dalam React

22 minitPemulaReact

Dalam pelajaran ini

  • Jadikan input terkawal (controlled) dengan value + onChange
  • Simpan beberapa medan dalam satu objek state dan kemas kini dengan satu handler
  • Kendalikan onSubmit, panggil event.preventDefault(), dan paparkan mesej pengesahan

Idea utama

Dalam React, data borang disimpan dalam state, bukan dalam DOM. Input memaparkan apa yang state kata (value) dan memberitahu state apabila ia berubah (onChange) — jadi kod anda sentiasa tahu dengan tepat apa yang pengguna taip.

Input HTML biasa menyimpan nilainya sendiri di dalam DOM. React lebih suka satu sumber kebenaran: nilai disimpan dalam state, dan input hanya memaparkannya. Ini dipanggil controlled input (input terkawal).

JSX
const [name, setName] = useState("");

<input value={name} onChange={(e) => setName(e.target.value)} />
<p>Hello, {name}!</p>

Setiap ketukan kekunci: onChange → setName → render semula → input memaparkan nilai baharu.

Jika anda beri input value tanpa onChange, ia menjadi read-only — menaip tidak memberi kesan dan React memberi amaran dalam console. Terkawal bermaksud kedua-dua bahagian.

Banyak medan, satu objek state

Beri setiap input name yang sepadan dengan key dalam objek state anda. Kemudian satu handler boleh mengemas kini mana-mana medan menggunakan computed property name [name]. Ingat: salin objek dengan ...form — jangan ubah state secara terus.

JSX
const [form, setForm] = useState({ name: "", email: "", track: "web" });

function handleChange(event) {
  const { name, value } = event.target;
  setForm({ ...form, [name]: value });
}

<input name="email" value={form.email} onChange={handleChange} />
<select name="track" value={form.track} onChange={handleChange}>…</select>

Menghantar (submit)

Letak onSubmit pada <form> (bukan onClick pada butang) supaya klik butang dan tekan Enter kedua-duanya berfungsi. Secara lalai, submit pelayar akan memuat semula halaman, yang akan memadam state React anda — jadi baris pertama ialah event.preventDefault().

JSX
function handleSubmit(event) {
  event.preventDefault();
  const errors = validate(form);
  setErrors(errors);
  if (Object.keys(errors).length > 0) return; // stop here
  setSignups([...signups, { ...form, id: Date.now() }]);
  setForm({ name: "", email: "", track: "web" }); // clear the form
}

<form onSubmit={handleSubmit} noValidate>…</form>

Dalam pratonton WANCode, borang yang terlupa preventDefault() tidak akan benar-benar dimuat semula — sebaliknya console memaparkan nota untuk memberitahu anda. Di laman sebenar, semua yang ditaip akan hilang.

Mesej pengesahan

Simpan ralat dalam state juga, sebagai objek seperti { email: "Perlukan @" }. Kemudian paparkan setiap satu dengan && betul-betul di sebelah medannya. Oleh kerana mesej ialah string, errors.email && <p>…</p> adalah selamat — hasil kosong ialah undefined, yang tidak dipaparkan.

Kita tambah noValidate pada borang supaya gelembung pengesahan terbina dalam pelayar tidak menghalang handler submit kita. Semakan di pihak klien adalah untuk membantu pengguna — server sebenar masih perlu mengesahkan semuanya sekali lagi.

Cipta satu objek state form dengan name, email dan track (mula dengan track: "web"). Jadikan ketiga-tiga medan terkawal dengan value dan satu handleChange yang dikongsi.

Kemudian jadikan tanda nama .preview memaparkan apa yang ditaip secara langsung: Name tag: {form.name} · {form.track}.

Semakan

  • Menaip nama mengemas kini tanda nama
  • Memilih track mengemas kini tanda nama
  • Medan email juga terkawal

Uji kefahaman

Q1

Apa yang menjadikan input "terkawal"?

Q2

Kenapa panggil event.preventDefault() dalam onSubmit?

Q3

setForm({ ...form, [name]: value }) — apa fungsi ...form?

Apa yang anda pelajari

  • Input terkawal: value={state} + onChange → state ialah satu-satunya sumber kebenaran.
  • Satu objek + atribut name + [name]: value mengendalikan banyak medan dengan satu handler.
  • Guna onSubmit pada form, mulakan dengan event.preventDefault(), sahkan, kemudian simpan dan kosongkan.
  • Ralat juga state — paparkannya dengan errors.field && <p className="error">…</p>.
Pratonton

Output konsol daripada kod anda akan dipaparkan di sini.

Langkah 1 daripada 3