React 表单处理与网络请求封装详解[特殊字符][特殊字符]

在 React 开发中，表单处理和网络请求是非常常见的需求。本文将围绕以下几个方面展开讲解：

FormItem 绑定 name 属性
表单校验与失焦校验
获取表单数据
封装请求模块 request

1. FormItem 绑定 `name` 属性

在 React 中，使用 Ant Design 的 Form 组件时，Form.Item 的 name 属性用于标识表单字段。这个 name 属性通常需要与后端接口的字段名保持一致，以便在提交表单时能够正确映射数据。

import { Form, Input } from 'antd';const MyForm = () => {return (<Form><Form.Item name="phone" label="手机号"><Input /></Form.Item></Form>);
};

注意：

name 属性是表单字段的唯一标识，必须与后端接口的字段名一致。
如果后端字段名是 phoneNumber，那么 name 也应该设置为 phoneNumber。

2. 表单校验与失焦校验

表单校验是确保用户输入数据符合要求的重要步骤。Ant Design 的 Form 组件提供了强大的校验功能，支持多种校验规则。

失焦校验

通过设置 validateTrigger="onBlur"，可以在用户离开输入框时触发校验。

<Form.Itemname="phone"label="手机号"validateTrigger="onBlur"rules={[{required: true,message: '请输入手机号',},{pattern: /^1[3-9]\d{9}$/,message: '请输入正确的手机号',},]}
><Input />
</Form.Item>

校验规则说明：

required: true：表示该字段为必填项。
pattern：使用正则表达式校验手机号格式。
message：校验失败时的提示信息。

多条校验

校验规则可以按顺序执行，只有前一条规则通过后才会执行下一条规则。

rules={[{ required: true, message: '请输入手机号' },{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' },
]}

3. 获取表单数据

在表单提交时，可以通过 onFinish 回调函数获取表单数据。onFinish 会在所有校验规则通过后触发。

const handleFinish = (values) => {console.log('表单数据:', values);// 在这里可以将数据提交到后端
};<Form onFinish={handleFinish}><Form.Item name="phone" label="手机号"><Input /></Form.Item><button type="submit">提交</button>
</Form>

说明：

values 是一个对象，包含了所有表单字段的值。
如果校验失败，onFinish 不会触发。

4. 封装请求模块 `request`

在一个项目中，通常会有很多网络请求。为了统一管理和复用，可以使用 axios 封装一个通用的请求模块。

封装 `request` 模块

import axios from 'axios';// 创建 axios 实例
const request = axios.create({baseURL: 'https://api.example.com', // 根域名timeout: 5000, // 请求超时时间
});// 请求拦截器
request.interceptors.request.use((config) => {// 在发送请求之前做一些处理，例如添加 tokenconst token = localStorage.getItem('token');if (token) {config.headers.Authorization = `Bearer ${token}`;}return config;},(error) => {return Promise.reject(error);}
);// 响应拦截器
request.interceptors.response.use((response) => {// 对响应数据做一些处理return response.data;},(error) => {// 对响应错误做一些处理return Promise.reject(error);}
);export { request };

使用 `request` 模块

在项目中，可以通过 request 模块发送请求：

import { request } from './utils/request';const fetchData = async () => {try {const response = await request.get('/user');console.log('用户数据:', response);} catch (error) {console.error('请求失败:', error);}
};

统一配置

可以将 request 模块的配置放在 index.js 中，方便统一管理：

// utils/request/index.js
import axios from 'axios';const request = axios.create({baseURL: 'https://api.example.com',timeout: 5000,
});request.interceptors.request.use((config) => {const token = localStorage.getItem('token');if (token) {config.headers.Authorization = `Bearer ${token}`;}return config;
});request.interceptors.response.use((response) => response.data,(error) => Promise.reject(error)
);export { request };