Peringkat Arkitek: Mengurus Borang dalam React-tutorial js-php.cn

Architect level: Managing Forms in React

Menguruskan borang dalam React ialah aspek kritikal dalam membina aplikasi yang canggih dan mesra pengguna. Sebagai pembangun peringkat arkitek, adalah penting untuk bukan sahaja memahami tetapi juga mereka bentuk amalan dan corak terbaik yang memastikan borang boleh skala, boleh diselenggara dan berprestasi. Artikel ini merangkumi komponen terkawal dan tidak terkawal, pengesahan borang dan teknik pengurusan borang yang kompleks, menyediakan panduan komprehensif untuk mengendalikan borang dalam React pada peringkat seni bina.

Komponen Terkawal

Komponen terkawal ialah komponen React di mana data borang diuruskan oleh keadaan komponen. Kaedah ini menawarkan kawalan penuh ke atas input borang, menjadikan gelagat borang lebih mudah diramal dan lebih mudah untuk nyahpepijat.

Mengendalikan Data Borang dengan Negeri

Komponen terkawal mengemas kini keadaan dengan setiap perubahan input. Pendekatan ini memastikan keadaan sentiasa mencerminkan nilai input semasa.

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;

Salin selepas log masuk

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 mengurus data borang. Menggunakan rujukan, anda boleh mengakses data borang terus daripada elemen DOM. Pendekatan ini berguna apabila akses DOM segera diperlukan.

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;

Salin selepas log masuk

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 input pengguna memenuhi kriteria yang diperlukan sebelum penyerahan. Melaksanakan pengesahan yang mantap meningkatkan pengalaman pengguna dan menghalang data tidak sah 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;

Salin selepas log masuk

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;

Salin selepas log masuk

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;

Salin selepas log masuk

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 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;

Salin selepas log masuk

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 peringkat arkitek, keupayaan anda untuk mereka bentuk dan menguatkuasakan amalan terbaik untuk pengurusan borang akan meningkatkan produktiviti pasukan anda dan kualiti keseluruhan aplikasi anda dengan ketara, memastikan standard yang tinggi dikekalkan sepanjang proses pembangunan.

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