在 React.js 中建立表單：初學者指南-js教程-PHP中文網

在 React.js 中建立表單：初學者指南

WBOY

發布： 2024-08-18 07:00:45

原創

253 人瀏覽過

Building Forms in React.js : A beginners guide

表單是 Web 應用程式不可或缺的一部分，支援使用者互動和資料收集。在 React.js 中，建立表單涉及使用狀態管理和元件驅動架構來確保效率和可維護性。本指南將涵蓋在 React.js 中建立表單的最佳實踐，使您的應用程式健壯且用戶友好。

1.使用受控組件

受控元件是 React 中處理表單輸入的首選方式。它們將表單資料保留在元件狀態中，從而更易於管理和驗證。

將所有表單輸入值儲存在一個狀態中。建立一個物件並將所有輸入與其狀態中的屬性進行映射，範例如下

import React, { useState } from 'react';

const MyForm = () => {


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

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

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
  };

return (
  <form onSubmit={handleSubmit}>
    <input type="text" name="name" value={formData.name}     onChange={handleChange} />
    <input type="email" name="email" value={formData.email}     onChange={handleChange} />
    <button type="submit">Submit</button>
</form>
)}
export default MyForm

登入後複製

2.錯誤處理

錯誤處理和驗證是表單的重要組成部分。您必須驗證並檢查使用者輸入的每個值是否有錯誤，並處理所有情況，例如：

取得 null/未定義
取得空值
無效資料型別等

必須實現客戶端驗證以增強使用者體驗並減少伺服器負載，最終提高效能。利用 Yup 等程式庫或自訂驗證邏輯來確保資料完整性。

讓我們看看如何實作自訂驗證邏輯

const validate = (formData) => {
  const errors = {};
  if (!formData.name) errors.name = 'Name is required';
  if (!formData.email) errors.email = 'Email is required';
  return errors;
};
const MyForm = () => {
  const [formData, setFormData] = useState({ name: '', email: '' });
  const [errors, setErrors] = useState({});
  const handleSubmit = (e) => {
    e.preventDefault();
    const validationErrors = validate(formData);
    if (Object.keys(validationErrors).length === 0) {
    console.log(formData);
    } else {
    setErrors(validationErrors);
  }
};
return (
  <form onSubmit={handleSubmit}>
    <input type="text" name="name" value={formData.name} onChange={handleChange} />
    {errors.name && <span>{errors.name}</span>}
    <input type="email" name="email" value={formData.email} onChange={handleChange} />
    {errors.email && <span>{errors.email}</span>}
    <button type="submit">Submit</button>
</form>
);
};

登入後複製

為了工作方便，必須使用Yup套件來順利驗證表單資料。它是一個非常流行的套件，與 React-Hook-Form 或 Formik 等表單庫一起使用。
是的文件：https://www.npmjs.com/package/yup

3.利用第三方函式庫

Formik 和 React Hook Form 等程式庫簡化了表單管理，提供了開箱即用的強大功能，使開發人員可以輕鬆地以更具可擴展性和靈活的方式建立和驗證表單

使用福米克：

文件：- https://formik.org/docs/overview

import React from 'react';
import ReactDOM from 'react-dom';
import { Formik, Field, Form } from 'formik';


const BasicForm = () => (
   <div> 
    <h1>Sign Up</h1>
    <Formik
      initialValues={{
      firstName: '',
      lastName: '',
      email: '',
    }}


  onSubmit={async (values) => {
    await new Promise((r) => setTimeout(r, 500));
    alert(JSON.stringify(values, null, 2));
  }}
>
  <Form>
    <label htmlFor="firstName">First Name</label>
    <Field id="firstName" name="firstName" placeholder="Jane" />


    <label htmlFor="lastName">Last Name</label>
    <Field id="lastName" name="lastName" placeholder="Doe" />


    <label htmlFor="email">Email</label>
    <Field
    id="email"
    name="email"
    placeholder="jane@acme.com"
    type="email"
  />
   <button type="submit">Submit</button>
  </Form>
 </Formik>
</div>
);


ReactDOM.render(<BasicForm />, document.getElementById('root'));

登入後複製

點選查看現場 Formik 示範