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（一个用于表单验证的库），并启动了开发服务器。

创建我们的费用表单

现在我们的项目已经设置好了，让我们创建我们的费用表单。我们将构建一个简单的表单，允许用户输入费用说明和金额。

第一步：基本表单结构

让我们从创建一个基本的表单结构开始。打开你的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组件来创建我们的表单结构。

第二步：添加验证

现在，让我们给我们的表单添加一些验证。我们将使用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）。
我们将validationSchema属性添加到我们的Formik组件中。

现在，我们的表单将在提交之前验证输入！

第三步：美化我们的表单

让我们添加一些基本样式，让我们的表单看起来更好看。在你的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