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

Intern level: Managing Forms in React

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 bermula dengan mengurus borang dalam React.

Komponen Terkawal

Komponen terkawal ialah komponen yang mana data borang dikendalikan oleh keadaan komponen. Ini bermakna bahawa 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 (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </label>
      <br />
      <label>
        Email:
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
};

export default ControlledForm;

Salin selepas log masuk

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

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 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 (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
        {errors.name && <span>{errors.name}</span>}
      </label>
      <br />
      <label>
        Email:
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        {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.

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;

Salin selepas log masuk

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 (
        <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 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!