Membina Borang dalam React.js : Panduan pemula

Borang adalah penting kepada aplikasi web, membolehkan interaksi pengguna dan pengumpulan data. Dalam React.js, borang binaan melibatkan penggunaan pengurusan negeri dan seni bina dipacu komponen untuk memastikan kecekapan dan kebolehselenggaraan. Panduan ini akan merangkumi amalan terbaik untuk membina borang dalam React.js, menjadikan aplikasi anda mantap dan mesra pengguna.
 

1. Gunakan Komponen Terkawal

 
Komponen terkawal ialah cara pilihan untuk mengendalikan input borang dalam React. Mereka menyimpan data borang dalam keadaan komponen, menjadikannya lebih mudah untuk diurus dan disahkan.
 
Simpan semua nilai input borang dalam keadaan. Cipta objek dan petakan semua input dengan hartanya dalam keadaan, Contoh di bawah

import React, { useState } from 'react';

const MyForm = () => {


  const [formData, setFormData] = useState({ name: '', email: '' });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
  };

return (
  <form onSubmit={handleSubmit}>
    <input type="text" name="name" value={formData.name}     onChange={handleChange} />
    <input type="email" name="email" value={formData.email}     onChange={handleChange} />
    <button type="submit">Submit</button>
</form>
)}
export default MyForm

2. Ralat Pengendalian

 
Pengendalian Ralat dan Pengesahan adalah bahagian penting dalam borang. Anda mesti mengesahkan dan menyemak ralat untuk setiap nilai yang dimasukkan oleh pengguna dan mengendalikan semua kes seperti:

• Mendapat batal/tidak ditentukan
• Mendapat nilai kosong
• Jenis Data Tidak Sah dan lain-lain

Mesti melaksanakan pengesahan pihak pelanggan untuk meningkatkan pengalaman pengguna dan mengurangkan beban pelayan yang akhirnya meningkatkan prestasi. Gunakan perpustakaan seperti Yup atau logik pengesahan tersuai untuk memastikan integriti data.

Mari lihat, cara melaksanakan logik pengesahan tersuai

const validate = (formData) => {
  const errors = {};
  if (!formData.name) errors.name = 'Name is required';
  if (!formData.email) errors.email = 'Email is required';
  return errors;
};
const MyForm = () => {
  const [formData, setFormData] = useState({ name: '', email: '' });
  const [errors, setErrors] = useState({});
  const handleSubmit = (e) => {
    e.preventDefault();
    const validationErrors = validate(formData);
    if (Object.keys(validationErrors).length === 0) {
    console.log(formData);
    } else {
    setErrors(validationErrors);
  }
};
return (
  <form onSubmit={handleSubmit}>
    <input type="text" name="name" value={formData.name} onChange={handleChange} />
    {errors.name && <span>{errors.name}</span>}
    <input type="email" name="email" value={formData.email} onChange={handleChange} />
    {errors.email && <span>{errors.email}</span>}
    <button type="submit">Submit</button>
</form>
);
};

 
Untuk memudahkan kerja, anda mesti menggunakan pakej Yup untuk Mengesahkan data borang dengan lancar. Ia adalah pakej yang sangat popular digunakan dengan Perpustakaan Borang seperti React-Hook-Form atau Formik.
Yup Docs: https://www.npmjs.com/package/yup
 

3. Manfaatkan Perpustakaan Pihak Ketiga

 
Perpustakaan seperti Formik dan React Hook Form memudahkan pengurusan borang, menawarkan ciri hebat di luar kotak dan memudahkan pembangun membina dan mengesahkan borang dengan cara yang lebih berskala dan fleksibel

Menggunakan Formik:

Dokumen :- https://formik.org/docs/overview

import React from 'react';
import ReactDOM from 'react-dom';
import { Formik, Field, Form } from 'formik';


const BasicForm = () => (
   <div> 
    <h1>Sign Up</h1>
    <Formik
      initialValues={{
      firstName: '',
      lastName: '',
      email: '',
    }}


  onSubmit={async (values) => {
    await new Promise((r) => setTimeout(r, 500));
    alert(JSON.stringify(values, null, 2));
  }}
>
  <Form>
    <label htmlFor="firstName">First Name</label>
    <Field id="firstName" name="firstName" placeholder="Jane" />


    <label htmlFor="lastName">Last Name</label>
    <Field id="lastName" name="lastName" placeholder="Doe" />


    <label htmlFor="email">Email</label>
    <Field
    id="email"
    name="email"
    placeholder="jane@acme.com"
    type="email"
  />
   <button type="submit">Submit</button>
  </Form>
 </Formik>
</div>
);


ReactDOM.render(<BasicForm />, document.getElementById('root'));

Klik untuk menyemak Demo Formik secara langsung

Kesimpulan

 
Membina borang dalam React.js boleh menjadi mudah dan cekap dengan mengikuti amalan terbaik ini. Gunakan komponen terkawal untuk pengurusan keadaan, sahkan input secara menyeluruh, manfaatkan perpustakaan pihak ketiga, tingkatkan UX dengan penggayaan yang betul dan optimumkan prestasi untuk mencipta borang yang responsif dan mantap.
Dengan mematuhi garis panduan ini, anda boleh memastikan borang anda boleh dipercayai, mesra pengguna dan boleh diselenggara, memberikan pengalaman yang lancar untuk pengguna dan pembangun.

Atas ialah kandungan terperinci Membina Borang dalam React.js : Panduan pemula. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!