架構師層級：在 React 中管理表單-js教程-PHP中文網

Architect level: Managing Forms in React

在 React 中管理表單是建立複雜、用戶友好的應用程式的關鍵方面。作為架構師級開發人員，不僅要理解而且要設計最佳實踐和模式，以確保表單可擴展、可維護和高效能，這一點至關重要。本文涵蓋了受控和非受控元件、表單驗證和複雜表單管理技術，為在架構層級處理 React 表單提供了全面的指南。

受控組件

受控元件是 React 元件，其中表單資料由元件的狀態管理。此方法提供對表單輸入的完全控制，使表單行為更可預測且更易於除錯。

使用狀態處理表單數據

受控元件會隨著每次輸入的變化而更新狀態。這種方法確保狀態始終反映目前輸入值。

範例：

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;

登入後複製

在此範例中，useState 管理表單數據，而每當使用者在輸入欄位中鍵入內容時，handleChange 函數就會更新狀態。

不受控制的組件

不受控制的元件依賴 DOM 來管理表單資料。使用 refs，您可以直接從 DOM 元素存取表單資料。當需要立即存取 DOM 時，此方法非常有用。

使用 Refs 存取表單數據

要建立不受控制的元件，請使用 useRef 掛鉤為表單元素建立參考。

範例：

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;

登入後複製

在此範例中，nameRef 和 emailRef 引用用於在提交表單時直接從 DOM 元素存取輸入值。

表單驗證

表單驗證對於確保使用者輸入在提交之前滿足所需標準至關重要。實施強大的驗證可以改善使用者體驗並防止處理無效資料。

基本驗證技術

基本驗證涉及檢查表單提交處理程序中的輸入值並顯示適當的錯誤訊息。

範例：

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;

登入後複製

在此範例中，驗證函數檢查名稱和電子郵件欄位是否為空並相應地設定錯誤訊息。

用於表單驗證的第三方函式庫

使用 Formik 和 Yup 等第三方函式庫可以簡化表單驗證並使其更易於維護。

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

登入後複製

在此範例中，Formik 和 Yup 處理表單狀態和驗證。 Formik 提供了一種靈活的方式來管理表單，而 Yup 則協助定義驗證模式。

複雜表單管理

管理多步驟表單

多步驟表單涉及跨多個步驟管理狀態和導航，通常使表單填寫過程更容易、更用戶友好。

範例：

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;

登入後複製

在此範例中，表單狀態透過多個步驟進行管理。 nextStep 和 prevStep 函數處理步驟之間的導航。

處理表單中的檔案上傳

處理文件上傳涉及使用文件輸入元素並在元件狀態下管理上傳的文件。

範例：

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;

登入後複製

在此範例中，handleFileChange 函數使用所選檔案更新狀態，handleSubmit 函數處理表單提交。

結論

在 React 中管理表單涉及瞭解和實作受控和非受控元件、執行表單驗證以及處理複雜表單（例如多步驟表單和檔案上傳）。透過掌握這些概念，您可以在 React 應用程式中建立健全、可維護且使用者友好的表單。作為架構師級開發人員，您設計和實施表單管理最佳實踐的能力將顯著提高團隊的生產力和應用程式的整體質量，確保在整個開發過程中保持高標準。

以上是架構師層級：在 React 中管理表單的詳細內容。更多資訊請關注PHP中文網其他相關文章！