Borang adalah penting untuk mengumpul input pengguna dalam aplikasi web. Menguruskan borang dalam React boleh menjadi mudah apabila anda memahami asas komponen terkawal dan tidak terkawal, pengesahan borang dan pengendalian borang yang kompleks. Panduan ini akan membantu anda mula mengurus borang dalam React.

Komponen Terkawal

Komponen terkawal ialah komponen di mana data borang dikendalikan oleh keadaan komponen. Ini bermakna nilai input dikawal oleh React.

Mengendalikan Data Borang dengan Negeri

Untuk mencipta komponen terkawal, anda perlu menyediakan keadaan untuk data borang dan mengemas kini keadaan berdasarkan input pengguna.

Contoh:

import React, { useState } from 'react'; const ControlledForm = () => { const [name, setName] = useState(''); const [email, setEmail] = useState(''); const handleSubmit = (event) => { event.preventDefault(); alert(`Name: ${name}, Email: ${email}`); }; return ( 
  Name:  setName(e.target.value)} />  
  Email:  setEmail(e.target.value)} />  
 Submit 
 ); }; export default ControlledForm;

Dalam contoh ini, input borang dikawal oleh nama dan pembolehubah keadaan e-mel. Pengendali acara onChange mengemas kini keadaan apabila pengguna menaip ke dalam medan input.

Komponen Tidak Terkawal

Komponen tidak terkawal ialah komponen di mana data borang dikendalikan oleh DOM sendiri. Anda menggunakan rujukan untuk mengakses data borang terus daripada elemen DOM.

Menggunakan Rujukan untuk Mengakses Data Borang

Untuk mencipta komponen yang tidak terkawal, anda menggunakan cangkuk useRef untuk membuat rujukan bagi elemen borang.

Contoh:

import React, { useRef } from 'react'; const UncontrolledForm = () => { const nameRef = useRef(null); const emailRef = useRef(null); const handleSubmit = (event) => { event.preventDefault(); alert(`Name: ${nameRef.current.value}, Email: ${emailRef.current.value}`); }; return ( 
  Name:   
  Email:   
 Submit 
 ); }; export default UncontrolledForm;

Dalam contoh ini, ref nameRef dan emailRef digunakan untuk mengakses nilai input terus daripada elemen DOM apabila borang diserahkan.

Pengesahan Borang

Pengesahan borang adalah penting untuk memastikan bahawa input pengguna memenuhi kriteria yang diperlukan sebelum ia diserahkan.

Teknik Pengesahan Asas

Anda boleh menambah pengesahan asas dengan menyemak nilai input dalam pengendali serah borang.

Contoh:

import React, { useState } from 'react'; const BasicValidationForm = () => { const [name, setName] = useState(''); const [email, setEmail] = useState(''); const [errors, setErrors] = useState({}); const validate = () => { const newErrors = {}; if (!name) newErrors.name = 'Name is required'; if (!email) newErrors.email = 'Email is required'; return newErrors; }; const handleSubmit = (event) => { event.preventDefault(); const newErrors = validate(); if (Object.keys(newErrors).length > 0) { setErrors(newErrors); } else { alert(`Name: ${name}, Email: ${email}`); } }; return ( 
  Name:  setName(e.target.value)} /> {errors.name && {errors.name}}  
  Email:  setEmail(e.target.value)} /> {errors.email && {errors.email}}  
 Submit 
 ); }; export default BasicValidationForm;

Dalam contoh ini, fungsi pengesahan menyemak sama ada nama dan medan e-mel kosong dan menetapkan mesej ralat dengan sewajarnya.

Perpustakaan Pihak Ketiga untuk Pengesahan Borang

Menggunakan perpustakaan pihak ketiga seperti Formik dan Yup boleh memudahkan pengesahan borang.

Contoh dengan Formik dan Yup:

import React from 'react'; import { Formik, Field, Form, ErrorMessage } from 'formik'; import * as Yup from 'yup'; const SignupSchema = Yup.object().shape({ name: Yup.string().required('Name is required'), email: Yup.string().email('Invalid email').required('Email is required'), }); const FormikForm = () => ( 
 
Signup Form
  { alert(JSON.stringify(values, null, 2)); }} > {({ errors, touched }) => ( 
  Name:    
  Email:    
 Submit 
 )}  
 ); export default FormikForm;

Dalam contoh ini, Formik dan Yup digunakan untuk mengendalikan keadaan borang dan pengesahan. Formik menyediakan cara yang fleksibel dan mudah untuk mengurus borang, manakala Yup membantu menentukan skema pengesahan.

Pengurusan Borang Kompleks

Menguruskan Borang Berbilang Langkah

Menguruskan borang berbilang langkah melibatkan pengendalian keadaan borang dan navigasi antara langkah.

Contoh:

import React, { useState } from 'react'; const MultiStepForm = () => { const [step, setStep] = useState(1); const [formData, setFormData] = useState({ name: '', email: '', address: '', }); const nextStep = () => setStep(step + 1); const prevStep = () => setStep(step - 1); const handleChange = (e) => { setFormData({ ...formData, [e.target.name]: e.target.value }); }; const handleSubmit = (e) => { e.preventDefault(); alert(JSON.stringify(formData, null, 2)); }; switch (step) { case 1: return ( 
 
Step 1
  Name:    Next  
 ); case 2: return ( 
 
Step 2
  Email:    Back   Next  
 ); case 3: return ( 
 
Step 3
  Address:    Back  Submit 
 ); default: return null; } }; export default MultiStepForm;

Dalam contoh ini, keadaan borang diurus merentasi berbilang langkah. Fungsi nextStep dan prevStep mengendalikan navigasi antara langkah.

Mengendalikan Muat Naik Fail dalam Borang

Mengendalikan muat naik fail melibatkan penggunaan elemen input fail dan menguruskan fail yang dimuat naik dalam keadaan komponen.

Contoh:

import React, { useState } from 'react'; const FileUploadForm = () => { const [file, setFile] = useState(null); const handleFileChange = (e) => { setFile(e.target.files[0]); }; const handleSubmit = (e) => { e.preventDefault(); if (file) { alert(`File name: ${file.name}`); } else { alert('No file selected'); } }; return ( 
  Upload file:   
 Submit 
 ); }; export default FileUploadForm;

Dalam contoh ini, fungsi handleFileChange mengemas kini keadaan dengan fail yang dipilih dan fungsi handleSubmit mengendalikan penyerahan borang.

Kesimpulan

Menguruskan borang dalam React melibatkan pemahaman komponen terkawal dan tidak terkawal, melaksanakan pengesahan borang dan mengendalikan borang yang kompleks. Dengan menguasai konsep ini, anda boleh mencipta borang yang mantap dan mesra pengguna dalam aplikasi React anda. Sebagai pelatih, memperoleh asas yang kukuh dalam bidang ini akan menyediakan anda untuk berjaya sambil anda terus belajar dan berkembang sebagai pembangun React.

Atas ialah kandungan terperinci Peringkat pelatih: Mengurus Borang dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!