Peringkat junior: Menguruskan Borang dalam React

Menguruskan borang ialah aspek asas untuk membangunkan aplikasi React. Panduan ini akan membantu anda memahami cara mengendalikan data borang dengan keadaan, menggunakan rujukan untuk komponen yang tidak terkawal, melaksanakan pengesahan borang dan mengurus borang yang kompleks, termasuk borang berbilang langkah dan muat naik fail.

Komponen Terkawal

Komponen terkawal ialah komponen yang mana data borang dikendalikan oleh keadaan komponen. Pendekatan ini memastikan bahawa komponen React mengawal sepenuhnya input borang, yang membawa kepada tingkah laku borang yang lebih boleh diramal dan terurus.

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 [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 digunakan untuk mengurus data borang dan fungsi handleChange mengemas kini keadaan apabila pengguna menaip ke dalam medan input.

Komponen Tidak Terkawal

Komponen tidak terkawal ialah komponen yang mana data borang dikendalikan oleh DOM itu 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 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 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 [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.

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));
      }}
    >
      {({ errors, touched }) => (
        <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 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) => {
    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. 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 (
    <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 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 pembangun junior, 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 junior: Menguruskan Borang dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!