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

表單是 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 示範

結論

 
透過遵循這些最佳實踐，在 React.js 中建立表單可以變得簡單且有效率。使用受控元件進行狀態管理，徹底驗證輸入，利用第三方庫，透過適當的樣式增強使用者體驗，並優化效能以建立響應靈敏且健壯的表單。
透過遵守這些準則，您可以確保您的表單可靠、使用者友好且可維護，為使用者和開發人員提供無縫體驗。

以上是在 React.js 中建立表單：初學者指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！