Tahap petunjuk: Mengurus Borang dalam React

Sebagai pembangun utama, mengurus borang dalam React memerlukan bukan sahaja memahami asas tetapi juga melaksanakan corak lanjutan dan amalan terbaik untuk memastikan kebolehskalaan, kebolehselenggaraan dan prestasi. Panduan komprehensif ini merangkumi komponen terkawal dan tidak terkawal, pengesahan borang dan teknik pengurusan borang yang kompleks, membantu anda memimpin pasukan anda dengan berkesan.

Komponen Terkawal

Komponen terkawal ialah komponen React yang mana data borang dikendalikan oleh keadaan komponen. Pendekatan ini menyediakan kawalan penuh ke atas input borang, menjadikan gelagat borang boleh diramal dan lebih mudah untuk diurus.

Mengendalikan Data Borang dengan Negeri

Untuk mencipta komponen terkawal, mulakan keadaan untuk data borang dan kemas kini keadaan berdasarkan input pengguna.

Contoh:

import React, { useState } from 'react';

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

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

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Name: ${formData.name}, Email: ${formData.email}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleChange}
        />
      </label>
      <br />
      <label>
        Email:
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
};

export default ControlledForm;

Dalam contoh ini, useState mengurus data borang dan fungsi handleChange mengemas kini keadaan apabila pengguna menaip ke dalam medan input.

Komponen Tidak Terkawal

Komponen tidak terkawal bergantung pada DOM untuk mengendalikan data borang. Rujukan digunakan untuk mengakses data borang terus daripada elemen DOM, yang boleh berguna untuk kes penggunaan tertentu yang memerlukan akses DOM segera.

Menggunakan Rujukan untuk Mengakses Data Borang

Untuk mencipta komponen yang tidak terkawal, gunakan cangkuk useRef untuk mencipta 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 (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" ref={nameRef} />
      </label>
      <br />
      <label>
        Email:
        <input type="email" ref={emailRef} />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
};

export default UncontrolledForm;

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

Pengesahan Borang

Pengesahan borang memastikan input pengguna memenuhi kriteria yang diperlukan sebelum penyerahan. Pengesahan yang betul meningkatkan pengalaman pengguna dan menghalang data yang salah daripada diproses.

Teknik Pengesahan Asas

Pengesahan asas melibatkan menyemak nilai input dalam pengendali serah borang dan memaparkan mesej ralat yang sesuai.

Contoh:

import React, { useState } from 'react';

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

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

  const validate = () => {
    const newErrors = {};
    if (!formData.name) newErrors.name = 'Name is required';
    if (!formData.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: ${formData.name}, Email: ${formData.email}`);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleChange}
        />
        {errors.name && <span>{errors.name}</span>}
      </label>
      <br />
      <label>
        Email:
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
        {errors.email && <span>{errors.email}</span>}
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
};

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 dan menjadikannya lebih mudah diselenggara.

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 = () => (
  <div>
    <h1>Signup Form</h1>
    <Formik
      initialValues={{ name: '', email: '' }}
      validationSchema={SignupSchema}
      onSubmit={(values) => {
        alert(JSON.stringify(values, null, 2));
      }}
    >
      {() => (
        <Form>
          <label>
            Name:
            <Field name="name" />
            <ErrorMessage name="name" component="div" />
          </label>
          <br />
          <label>
            Email:
            <Field name="email" type="email" />
            <ErrorMessage name="email" component="div" />
          </label>
          <br />
          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  </div>
);

export default FormikForm;

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

Pengurusan Borang Kompleks

Menguruskan Borang Berbilang Langkah

Borang berbilang langkah melibatkan pengurusan keadaan dan navigasi merentas berbilang langkah, selalunya menjadikan proses pengisian borang lebih mudah dan lebih mesra pengguna.

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) => {
    const { name, value } = e.target;
    setFormData((prevData) => ({
      ...prevData,
      [name]: value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(JSON.stringify(formData, null, 2));
  };

  switch (step) {
    case 1:
      return (
        <form>
          <h2>Step 1</h2>
          <label>
            Name:
            <input
              type="text"
              name="name"
              value={formData.name}
              onChange={handleChange}
            />
          </label>
          <button type="button" onClick={nextStep}>
            Next
          </button>
        </form>
      );
    case 2:
      return (
        <form>
          <h2>Step 2</h2>
          <label>
            Email:
            <input
              type="email"
              name="email"
              value={formData.email}
              onChange={handleChange}
            />
          </label>
          <button type="button" onClick={prevStep}>
            Back
          </button>
          <button type="button" onClick={nextStep}>
            Next
          </button>
        </form>
      );
    case 3:
      return (
        <form onSubmit={handleSubmit}>
          <h2>Step 3</h2>
          <label>
            Address:
            <input
              type="text"
              name="address"
              value={formData.address}
              onChange={handleChange}
            />
          </label>
          <button type="button" onClick={prevStep}>
            Back
          </button>
          <button type="submit">Submit</button>
        </form>
      );
    default:
      return null;
  }
};

export default MultiStepForm;

Dalam contoh ini, keadaan borang diurus merentas berbilang langkah. `Langkah seterusnya

Fungsi

dan prevStep` mengendalikan navigasi antara langkah.

Mengendalikan Muat Naik Fail dalam Borang

Mengendalikan muat naik fail melibatkan penggunaan elemen input fail dan mengurus 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 (
    <form onSubmit={handleSubmit}>
      <label>
        Upload file:
        <input type="file" onChange={handleFileChange} />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
};

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 dan pelaksanaan komponen terkawal dan tidak terkawal, melaksanakan pengesahan borang dan mengendalikan borang yang kompleks seperti borang berbilang langkah dan muat naik fail. Dengan menguasai konsep ini, anda boleh mencipta borang yang mantap, boleh diselenggara dan mesra pengguna dalam aplikasi React anda. Sebagai pembangun utama, keupayaan anda untuk mengurus borang dengan berkesan akan meningkatkan produktiviti pasukan anda dan menyumbang kepada kualiti keseluruhan aplikasi anda, memastikan amalan terbaik dipatuhi dan piawaian tinggi dikekalkan sepanjang proses pembangunan.

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