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

news2025/1/20 6:46:20

在 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.Item
  name="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) => {
    // 在发送请求之前做一些处理，例如添加 token
    const 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 };