ReactJS - Formik：建立一個支出表單

你好，未來的React開發者！今天，我們將踏上一段令人興奮的旅程，進入React表單處理的世界，使用一個名叫Formik的出色庫。在這個教程結束時，你將能像專業人士一樣創建乾淨且高效的表單。那麼，讓我們開始吧！

ReactJS - Formik

Formik是什麼？

在我們開始編程之前，讓我們了解一下Formik是什麼，以及它為什麼是React開發中的一個遊戲規則改變者。

Formik是一個流行的庫，它簡化了React應用程序中的表單處理。它負責表單中的瑣碎部分，如管理表單狀態、驗證和提交，讓你可以專注於最重要的部分——你的應用程序邏輯。

把Formik當作你的個人表單助手。就像一個好助手會為你處理所有文件一樣，Formik管理所有與表單相關的任務，讓你可以專注於大局。

建立我們的專案

首先，讓我們建立我們的專案。我們假設你的電腦已經安裝了Node.js。如果沒有，那就從Node.js官網去安裝它。

打開你的終端機並運行以下命令：

npx create-react-app expense-form-app
cd expense-form-app
npm install formik yup
npm start

這些命令會創建一個新的React應用程序，安裝Formik和Yup（一個表單驗證的庫），並啟動開發服務器。

創建我們的支出表單

現在，我們的專案已經建立好了，讓我們來創建我們的支出表單。我們將建立一個簡單的表單，使用戶可以輸入支出描述和金額。

步驟1：基本表單結構

讓我們從創建一個基本的表單結構開始。打開你的src/App.js文件，並將其內容替換為以下代碼：

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';

function App() {
return (
<div className="App">
<h1>支出表單</h1>
<Formik
initialValues={{ description: '', amount: '' }}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
{({ isSubmitting }) => (
<Form>
<div>
<label htmlFor="description">描述</label>
<Field type="text" name="description" />
<ErrorMessage name="description" component="div" />
</div>
<div>
<label htmlFor="amount">金額</label>
<Field type="number" name="amount" />
<ErrorMessage name="amount" component="div" />
</div>
<button type="submit" disabled={isSubmitting}>
提交
</button>
</Form>
)}
</Formik>
</div>
);
}

export default App;

讓我們分解一下這裡發生了什麼：

我們從Formik中導入了必要的組件。
我們創建了一個Formik組件來包裝我們的表單。
我們為表單字段設置了initialValues。
我們定義了一個onSubmit函數來處理表單提交。
我們使用Formik的Form、Field和ErrorMessage組件來創建我們的表單結構。

步驟2：添加驗證

現在，讓我們為我們的表單添加一些驗證。我們將使用Yup來完成這項工作。更新你的App.js文件如下：

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const ExpenseSchema = Yup.object().shape({
description: Yup.string()
.min(2, '太短了！')
.max(50, '太長了！')
.required('必填'),
amount: Yup.number()
.positive('必須是正數')
.required('必填'),
});

function App() {
return (
<div className="App">
<h1>支出表單</h1>
<Formik
initialValues={{ description: '', amount: '' }}
validationSchema={ExpenseSchema}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
{({ isSubmitting }) => (
<Form>
<div>
<label htmlFor="description">描述</label>
<Field type="text" name="description" />
<ErrorMessage name="description" component="div" />
</div>
<div>
<label htmlFor="amount">金額</label>
<Field type="number" name="amount" />
<ErrorMessage name="amount" component="div" />
</div>
<button type="submit" disabled={isSubmitting}>
提交
</button>
</Form>
)}
</Formik>
</div>
);
}

export default App;

這裡是我們添加的內容：

我們導入了Yup並定義了一個驗證模式（ExpenseSchema）。
我們為我們的Formik組件添加了validationSchema屬性。

現在，我們的表單在提交之前會進行輸入驗證！

步驟3：為我們的表單添加樣式

讓我們為我們的表單添加一些基本樣式，讓它看起來更漂亮。在src資料夾中創建一個新文件App.css並添加以下CSS：

.App {
font-family: Arial, sans-serif;
max-width: 400px;
margin: 0 auto;
padding: 20px;
}

h1 {
color: #333;
}

form {
display: flex;
flex-direction: column;
}

div {
margin-bottom: 15px;
}

label {
margin-bottom: 5px;
display: block;
}

input {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}

button {
background-color: #4CAF50;
color: white;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
}

button:disabled {
background-color: #ddd;
}

.error {
color: red;
font-size: 0.8em;
}

現在，更新你的App.js來導入這個CSS文件：

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';
import './App.css';

// ... 其餘的代碼保持不變

結論

恭喜你！你剛剛使用Formik和React建立了一個功能性的支出表單。這只是你可以使用Formik做到的事情的開始。隨著你繼續在React的世界中前行，你會發現Formik是處理所有複雜表單的無價工具。

記住，熟能生巧。嘗試修改這個表單，添加新的字段，或者使用你所學創建全新的表單。React開發的世界是廣闊而令人興奮的，而你正處於成為其中一員的正確道路上！

快樂編程，願你的表單總是驗證順利！?

Formik方法表

以下是某些常用Formik方法的表格：

方法	描述
`handleSubmit`	處理表單提交
`handleChange`	處理表單字段變化
`handleBlur`	處理當字段失去焦點時
`setFieldValue`	手動設定字段值
`setFieldTouched`	手動設定字段的觸摸狀態
`validateForm`	手動觸發表單驗證
`resetForm`	重置表單到初始值
`setErrors`	手動設定表單錯誤
`setStatus`	設定一個頂級狀態對象
`setSubmitting`	設定表單的提交狀態

這些方法為你提供了對表單行為和狀態的細粒度控制。隨著你對Formik越來越熟悉，你會發現自己會經常使用這些方法來創建有更多複雜性和互動性的表單。

Credits: Image by storyset