AJAX技术如何与主流前端框架深度融合提升用户体验与开发效率

引言

在现代Web开发中，AJAX（Asynchronous JavaScript and XML）技术已经成为构建动态、响应式用户界面的基石。它允许网页在不重新加载整个页面的情况下与服务器进行数据交换，从而显著提升用户体验。与此同时，主流前端框架如React、Vue和Angular提供了强大的组件化架构和状态管理能力。将AJAX技术与这些框架深度融合，不仅能进一步提升用户体验，还能大幅提高开发效率。本文将深入探讨这一融合的原理、实践方法以及具体案例。

1. AJAX技术基础回顾

1.1 AJAX的核心概念

AJAX并非一种单一技术，而是一组技术的组合，包括：

XMLHttpRequest对象：用于在后台与服务器交换数据
JavaScript：用于处理和显示数据
DOM：用于动态更新页面内容
XML或JSON：常用的数据交换格式

1.2 传统AJAX实现示例

// 传统XMLHttpRequest实现 function fetchData() { const xhr = new XMLHttpRequest(); xhr.open('GET', 'https://api.example.com/data', true); xhr.onload = function() { if (xhr.status >= 200 && xhr.status < 300) { const data = JSON.parse(xhr.responseText); // 更新DOM document.getElementById('result').innerHTML = data.message; } else { console.error('请求失败:', xhr.statusText); } }; xhr.onerror = function() { console.error('网络错误'); }; xhr.send(); }

1.3 现代AJAX实现：Fetch API

// 使用Fetch API的现代实现 async function fetchData() { try { const response = await fetch('https://api.example.com/data'); if (!response.ok) { throw new Error(`HTTP错误! 状态码: ${response.status}`); } const data = await response.json(); // 处理数据 console.log(data); } catch (error) { console.error('获取数据失败:', error); } }

2. 主流前端框架概述

2.1 React

React是由Facebook开发的用于构建用户界面的JavaScript库。其核心特点包括：

组件化架构：将UI拆分为可复用的组件
虚拟DOM：高效的DOM更新机制
单向数据流：清晰的数据流向

2.2 Vue

Vue是一个渐进式JavaScript框架，特点包括：

响应式数据绑定：自动同步数据和视图
组件系统：可复用的UI组件
轻量级：核心库体积小，易于集成

2.3 Angular

Angular是一个完整的前端框架，由Google维护：

TypeScript支持：提供类型安全
依赖注入：模块化架构
强大的CLI工具：简化开发流程

3. AJAX与框架的深度融合策略

3.1 在React中的AJAX集成

3.1.1 使用useEffect进行数据获取

import React, { useState, useEffect } from 'react'; function UserProfile({ userId }) { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchData = async () => { try { setLoading(true); const response = await fetch( `https://api.example.com/users/${userId}` ); if (!response.ok) { throw new Error(`HTTP错误! 状态码: ${response.status}`); } const data = await response.json(); setUser(data); setError(null); } catch (err) { setError(err.message); console.error('获取用户数据失败:', err); } finally { setLoading(false); } }; fetchData(); // 清理函数：取消未完成的请求 return () => { // 在实际应用中，可以使用AbortController取消请求 console.log('清理effect'); }; }, [userId]); // 依赖数组：当userId变化时重新执行 if (loading) return <div>加载中...</div>; if (error) return <div>错误: {error}</div>; if (!user) return <div>未找到用户</div>; return ( <div className="user-profile"> <h2>{user.name}</h2> <p>邮箱: {user.email}</p> <p>注册时间: {new Date(user.createdAt).toLocaleDateString()}</p> </div> ); } export default UserProfile;

3.1.2 使用自定义Hook封装AJAX逻辑

// useApi.js - 自定义Hook import { useState, useEffect } from 'react'; export function useApi(url, options = {}) { const [data, setData] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const fetchData = async (overrideUrl = null) => { setLoading(true); setError(null); try { const response = await fetch(overrideUrl || url, { method: options.method || 'GET', headers: { 'Content-Type': 'application/json', ...options.headers }, body: options.body ? JSON.stringify(options.body) : null }); if (!response.ok) { throw new Error(`HTTP错误! 状态码: ${response.status}`); } const result = await response.json(); setData(result); return result; } catch (err) { setError(err); throw err; } finally { setLoading(false); } }; // 自动执行一次 useEffect(() => { if (url) { fetchData(); } }, [url]); return { data, loading, error, refetch: fetchData }; } // 使用示例 function ProductList() { const { data: products, loading, error, refetch } = useApi( 'https://api.example.com/products' ); if (loading) return <div>加载中...</div>; if (error) return <div>错误: {error.message}</div>; return ( <div> <button onClick={() => refetch()}>刷新</button> <ul> {products?.map(product => ( <li key={product.id}> {product.name} - ${product.price} </li> ))} </ul> </div> ); }

3.2 在Vue中的AJAX集成

3.2.1 使用Composition API

// ProductList.vue <template> <div> <button @click="refreshData">刷新</button> <div v-if="loading">加载中...</div> <div v-else-if="error" class="error">错误: {{ error }}</div> <ul v-else> <li v-for="product in products" :key="product.id"> {{ product.name }} - ${{ product.price }} </li> </ul> </div> </template> <script setup> import { ref, onMounted } from 'vue'; const products = ref([]); const loading = ref(false); const error = ref(null); const fetchData = async () => { loading.value = true; error.value = null; try { const response = await fetch('https://api.example.com/products'); if (!response.ok) { throw new Error(`HTTP错误! 状态码: ${response.status}`); } products.value = await response.json(); } catch (err) { error.value = err.message; console.error('获取产品失败:', err); } finally { loading.value = false; } }; const refreshData = () => { fetchData(); }; onMounted(() => { fetchData(); }); </script> <style scoped> .error { color: red; } </style>

3.2.2 使用Vue的响应式系统优化AJAX

// 使用Vue的watch监听参数变化 <script setup> import { ref, watch } from 'vue'; const props = defineProps({ categoryId: { type: Number, required: true } }); const products = ref([]); const loading = ref(false); // 监听categoryId变化，自动重新获取数据 watch( () => props.categoryId, async (newCategoryId) => { if (newCategoryId) { loading.value = true; try { const response = await fetch( `https://api.example.com/products?category=${newCategoryId}` ); products.value = await response.json(); } catch (error) { console.error('获取产品失败:', error); } finally { loading.value = false; } } }, { immediate: true } // 立即执行一次 ); </script>

3.3 在Angular中的AJAX集成

3.3.1 使用HttpClient服务

// product.service.ts import { Injectable } from '@angular/core'; import { HttpClient, HttpParams } from '@angular/common/http'; import { Observable, throwError } from 'rxjs'; import { catchError, map, tap } from 'rxjs/operators'; export interface Product { id: number; name: string; price: number; category: string; } @Injectable({ providedIn: 'root' }) export class ProductService { private apiUrl = 'https://api.example.com/products'; constructor(private http: HttpClient) {} // 获取所有产品 getProducts(): Observable<Product[]> { return this.http.get<Product[]>(this.apiUrl).pipe( tap(data => console.log('获取到的产品:', data)), catchError(this.handleError) ); } // 根据分类获取产品 getProductsByCategory(category: string): Observable<Product[]> { const params = new HttpParams().set('category', category); return this.http.get<Product[]>(this.apiUrl, { params }).pipe( catchError(this.handleError) ); } // 创建产品 createProduct(product: Omit<Product, 'id'>): Observable<Product> { return this.http.post<Product>(this.apiUrl, product).pipe( catchError(this.handleError) ); } // 错误处理 private handleError(error: any) { let errorMessage = '未知错误'; if (error.error instanceof ErrorEvent) { // 客户端错误 errorMessage = `错误: ${error.error.message}`; } else { // 服务器错误 errorMessage = `错误代码: ${error.status}, 错误信息: ${error.message}`; } console.error('API错误:', errorMessage); return throwError(() => new Error(errorMessage)); } }

3.3.2 在组件中使用HttpClient

// product-list.component.ts import { Component, OnInit } from '@angular/core'; import { ProductService, Product } from './product.service'; @Component({ selector: 'app-product-list', template: ` <div> <button (click)="refresh()">刷新</button> <div *ngIf="loading">加载中...</div> <div *ngIf="error" class="error">{{ error }}</div> <ul *ngIf="!loading && !error"> <li *ngFor="let product of products"> {{ product.name }} - ${{ product.price }} </li> </ul> </div> `, styles: [` .error { color: red; } `] }) export class ProductListComponent implements OnInit { products: Product[] = []; loading = false; error: string | null = null; constructor(private productService: ProductService) {} ngOnInit() { this.loadProducts(); } loadProducts() { this.loading = true; this.error = null; this.productService.getProducts().subscribe({ next: (data) => { this.products = data; this.loading = false; }, error: (err) => { this.error = err.message; this.loading = false; } }); } refresh() { this.loadProducts(); } }

4. 高级集成模式

4.1 状态管理库的集成

4.1.1 React + Redux Toolkit + RTK Query

// store/apiSlice.js import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'; export const apiSlice = createApi({ reducerPath: 'api', baseQuery: fetchBaseQuery({ baseUrl: 'https://api.example.com', prepareHeaders: (headers, { getState }) => { const token = getState().auth.token; if (token) { headers.set('authorization', `Bearer ${token}`); } return headers; } }), tagTypes: ['Products', 'Users'], endpoints: (builder) => ({ getProducts: builder.query({ query: (params = {}) => ({ url: '/products', params }), providesTags: ['Products'] }), getProductById: builder.query({ query: (id) => `/products/${id}`, providesTags: (result, error, id) => [{ type: 'Products', id }] }), createProduct: builder.mutation({ query: (product) => ({ url: '/products', method: 'POST', body: product }), invalidatesTags: ['Products'] }), updateProduct: builder.mutation({ query: ({ id, ...patch }) => ({ url: `/products/${id}`, method: 'PATCH', body: patch }), invalidatesTags: (result, error, { id }) => [{ type: 'Products', id }] }), deleteProduct: builder.mutation({ query: (id) => ({ url: `/products/${id}`, method: 'DELETE' }), invalidatesTags: (result, error, id) => [{ type: 'Products', id }] }) }) }); // 导出自动生成的hooks export const { useGetProductsQuery, useGetProductByIdQuery, useCreateProductMutation, useUpdateProductMutation, useDeleteProductMutation } = apiSlice; // 在组件中使用 import { useGetProductsQuery } from '../store/apiSlice'; function ProductList() { const { data: products, isLoading, error, refetch } = useGetProductsQuery(); if (isLoading) return <div>加载中...</div>; if (error) return <div>错误: {error.message}</div>; return ( <div> <button onClick={refetch}>刷新</button> <ul> {products?.map(product => ( <li key={product.id}> {product.name} - ${product.price} </li> ))} </ul> </div> ); }

4.1.2 Vue + Pinia + Axios

// stores/products.js import { defineStore } from 'pinia'; import axios from 'axios'; export const useProductStore = defineStore('products', { state: () => ({ products: [], loading: false, error: null, currentProduct: null }), actions: { async fetchProducts(params = {}) { this.loading = true; this.error = null; try { const response = await axios.get('https://api.example.com/products', { params }); this.products = response.data; } catch (error) { this.error = error.message; console.error('获取产品失败:', error); } finally { this.loading = false; } }, async fetchProductById(id) { this.loading = true; this.error = null; try { const response = await axios.get( `https://api.example.com/products/${id}` ); this.currentProduct = response.data; } catch (error) { this.error = error.message; console.error('获取产品失败:', error); } finally { this.loading = false; } }, async createProduct(productData) { try { const response = await axios.post( 'https://api.example.com/products', productData ); this.products.push(response.data); return response.data; } catch (error) { this.error = error.message; throw error; } }, async updateProduct(id, patch) { try { const response = await axios.patch( `https://api.example.com/products/${id}`, patch ); const index = this.products.findIndex(p => p.id === id); if (index !== -1) { this.products[index] = response.data; } return response.data; } catch (error) { this.error = error.message; throw error; } }, async deleteProduct(id) { try { await axios.delete(`https://api.example.com/products/${id}`); this.products = this.products.filter(p => p.id !== id); } catch (error) { this.error = error.message; throw error; } } }, getters: { filteredProducts: (state) => (category) => { if (!category) return state.products; return state.products.filter(p => p.category === category); }, productCount: (state) => state.products.length } });

4.2 请求取消与竞态条件处理

4.2.1 React中的AbortController

import { useState, useEffect } from 'react'; function SearchComponent() { const [query, setQuery] = useState(''); const [results, setResults] = useState([]); const [loading, setLoading] = useState(false); useEffect(() => { if (!query.trim()) { setResults([]); return; } const controller = new AbortController(); const signal = controller.signal; const fetchData = async () => { setLoading(true); try { const response = await fetch( `https://api.example.com/search?q=${encodeURIComponent(query)}`, { signal } ); if (!response.ok) { throw new Error(`HTTP错误! 状态码: ${response.status}`); } const data = await response.json(); setResults(data); } catch (error) { if (error.name !== 'AbortError') { console.error('搜索失败:', error); } } finally { setLoading(false); } }; // 延迟执行，避免频繁请求 const timeoutId = setTimeout(fetchData, 300); return () => { controller.abort(); clearTimeout(timeoutId); }; }, [query]); return ( <div> <input type="text" value={query} onChange={(e) => setQuery(e.target.value)} placeholder="搜索..." /> {loading && <div>搜索中...</div>} <ul> {results.map(item => ( <li key={item.id}>{item.name}</li> ))} </ul> </div> ); }

4.2.2 Vue中的取消请求

// 使用axios的取消令牌 <script setup> import { ref, watch, onUnmounted } from 'vue'; import axios from 'axios'; const query = ref(''); const results = ref([]); const loading = ref(false); let cancelToken = null; watch(query, async (newQuery) => { if (!newQuery.trim()) { results.value = []; return; } // 取消之前的请求 if (cancelToken) { cancelToken.cancel('操作被取消'); } // 创建新的取消令牌 cancelToken = axios.CancelToken.source(); loading.value = true; try { const response = await axios.get( `https://api.example.com/search?q=${encodeURIComponent(newQuery)}`, { cancelToken: cancelToken.token } ); results.value = response.data; } catch (error) { if (!axios.isCancel(error)) { console.error('搜索失败:', error); } } finally { loading.value = false; } }); onUnmounted(() => { if (cancelToken) { cancelToken.cancel('组件卸载'); } }); </script>

4.3 错误处理与重试机制

4.3.1 React中的错误边界和重试

// ErrorBoundary组件 class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false, error: null }; } static getDerivedStateFromError(error) { return { hasError: true, error }; } componentDidCatch(error, errorInfo) { console.error('错误边界捕获:', error, errorInfo); } render() { if (this.state.hasError) { return ( <div className="error-fallback"> <h3>出错了</h3> <p>{this.state.error?.message}</p> <button onClick={() => this.setState({ hasError: false })}> 重试 </button> </div> ); } return this.props.children; } } // 带重试逻辑的组件 function DataFetcher() { const [data, setData] = useState(null); const [retryCount, setRetryCount] = useState(0); const [error, setError] = useState(null); const fetchData = async (attempt = 0) => { try { const response = await fetch('https://api.example.com/data'); if (!response.ok) { throw new Error(`HTTP错误! 状态码: ${response.status}`); } const result = await response.json(); setData(result); setError(null); setRetryCount(0); } catch (err) { if (attempt < 3) { // 指数退避重试 const delay = Math.pow(2, attempt) * 1000; console.log(`第${attempt + 1}次尝试失败，${delay}ms后重试...`); setTimeout(() => fetchData(attempt + 1), delay); } else { setError(err.message); setRetryCount(attempt); } } }; useEffect(() => { fetchData(); }, []); if (error) { return ( <div> <p>获取数据失败: {error}</p> <p>尝试次数: {retryCount}</p> <button onClick={() => fetchData(0)}>手动重试</button> </div> ); } if (!data) return <div>加载中...</div>; return <div>数据: {JSON.stringify(data)}</div>; }

5. 性能优化策略

5.1 数据缓存策略

5.1.1 React Query/TanStack Query

// React Query示例 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'; function ProductList() { const queryClient = useQueryClient(); // 查询数据 const { data: products, isLoading, error } = useQuery({ queryKey: ['products'], queryFn: async () => { const response = await fetch('https://api.example.com/products'); if (!response.ok) throw new Error('获取产品失败'); return response.json(); }, staleTime: 5 * 60 * 1000, // 5分钟内数据视为新鲜 cacheTime: 10 * 60 * 1000, // 缓存10分钟 refetchOnWindowFocus: true, // 窗口聚焦时重新获取 refetchInterval: 60 * 1000 // 每分钟自动刷新 }); // 变异操作 const createProductMutation = useMutation({ mutationFn: async (product) => { const response = await fetch('https://api.example.com/products', { method: 'POST', body: JSON.stringify(product) }); return response.json(); }, onSuccess: () => { // 使相关查询失效 queryClient.invalidateQueries(['products']); } }); if (isLoading) return <div>加载中...</div>; if (error) return <div>错误: {error.message}</div>; return ( <div> <button onClick={() => createProductMutation.mutate({ name: '新产品', price: 99.99 }) } disabled={createProductMutation.isLoading} > {createProductMutation.isLoading ? '创建中...' : '创建产品'} </button> <ul> {products?.map(product => ( <li key={product.id}> {product.name} - ${product.price} </li> ))} </ul> </div> ); }

5.2 请求合并与批量处理

5.2.1 GraphQL作为AJAX的替代方案

// 使用GraphQL减少请求次数 const query = ` query GetProducts($categoryId: ID) { products(categoryId: $categoryId) { id name price category { id name } reviews { id rating comment } } } `; // 在React中使用Apollo Client import { useQuery, gql } from '@apollo/client'; const GET_PRODUCTS = gql` query GetProducts($categoryId: ID) { products(categoryId: $categoryId) { id name price category { id name } } } `; function ProductList({ categoryId }) { const { loading, error, data } = useQuery(GET_PRODUCTS, { variables: { categoryId } }); if (loading) return <div>加载中...</div>; if (error) return <div>错误: {error.message}</div>; return ( <ul> {data.products.map(product => ( <li key={product.id}> {product.name} - ${product.price} <small> ({product.category.name})</small> </li> ))} </ul> ); }

6. 开发效率提升实践

6.1 代码生成与类型安全

6.1.1 使用OpenAPI/Swagger生成客户端代码

# 使用openapi-generator生成TypeScript客户端 npx @openapitools/openapi-generator-cli generate -i https://api.example.com/openapi.json -g typescript-axios -o ./src/api

6.1.2 TypeScript类型定义

// api/types.ts export interface Product { id: number; name: string; price: number; category: string; createdAt: string; updatedAt: string; } export interface ApiResponse<T> { data: T; message: string; status: number; } export interface PaginationParams { page?: number; limit?: number; sort?: string; order?: 'asc' | 'desc'; } export interface ProductFilters { category?: string; minPrice?: number; maxPrice?: number; search?: string; }

6.2 开发工具集成

6.2.1 使用Mock Service Worker进行API模拟

// mocks/handlers.js import { rest } from 'msw'; export const handlers = [ rest.get('https://api.example.com/products', (req, res, ctx) => { const category = req.url.searchParams.get('category'); const page = parseInt(req.url.searchParams.get('page') || '1'); const limit = parseInt(req.url.searchParams.get('limit') || '10'); const allProducts = [ { id: 1, name: '产品A', price: 99.99, category: '电子' }, { id: 2, name: '产品B', price: 199.99, category: '家居' }, { id: 3, name: '产品C', price: 299.99, category: '电子' } ]; const filteredProducts = category ? allProducts.filter(p => p.category === category) : allProducts; const start = (page - 1) * limit; const end = start + limit; const paginatedProducts = filteredProducts.slice(start, end); return res( ctx.status(200), ctx.json({ data: paginatedProducts, total: filteredProducts.length, page, limit }) ); }), rest.post('https://api.example.com/products', async (req, res, ctx) => { const newProduct = await req.json(); const product = { ...newProduct, id: Date.now(), createdAt: new Date().toISOString(), updatedAt: new Date().toISOString() }; return res(ctx.status(201), ctx.json(product)); }) ];

7. 实际案例：电商网站商品列表

7.1 完整React实现

// components/ProductList.jsx import React, { useState, useEffect, useCallback } from 'react'; import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'; import { debounce } from 'lodash'; const API_BASE = 'https://api.example.com'; // 自定义Hook：商品查询 function useProducts(filters = {}) { return useQuery({ queryKey: ['products', filters], queryFn: async () => { const params = new URLSearchParams(); Object.entries(filters).forEach(([key, value]) => { if (value) params.append(key, value); }); const response = await fetch(`${API_BASE}/products?${params}`); if (!response.ok) throw new Error('获取商品失败'); return response.json(); }, staleTime: 5 * 60 * 1000, keepPreviousData: true }); } // 自定义Hook：商品操作 function useProductActions() { const queryClient = useQueryClient(); const createProduct = useMutation({ mutationFn: async (product) => { const response = await fetch(`${API_BASE}/products`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(product) }); return response.json(); }, onSuccess: () => { queryClient.invalidateQueries(['products']); } }); const updateProduct = useMutation({ mutationFn: async ({ id, ...patch }) => { const response = await fetch(`${API_BASE}/products/${id}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(patch) }); return response.json(); }, onSuccess: () => { queryClient.invalidateQueries(['products']); } }); const deleteProduct = useMutation({ mutationFn: async (id) => { const response = await fetch(`${API_BASE}/products/${id}`, { method: 'DELETE' }); return response.json(); }, onSuccess: () => { queryClient.invalidateQueries(['products']); } }); return { createProduct, updateProduct, deleteProduct }; } // 主组件 export default function ProductList() { const [filters, setFilters] = useState({ category: '', search: '', minPrice: '', maxPrice: '' }); const [editingProduct, setEditingProduct] = useState(null); const [showForm, setShowForm] = useState(false); const { data, isLoading, error, refetch } = useProducts(filters); const { createProduct, updateProduct, deleteProduct } = useProductActions(); // 防抖搜索 const debouncedSearch = useCallback( debounce((value) => { setFilters(prev => ({ ...prev, search: value })); }, 300), [] ); const handleSearch = (e) => { debouncedSearch(e.target.value); }; const handleCreate = async (productData) => { try { await createProduct.mutateAsync(productData); setShowForm(false); } catch (err) { console.error('创建失败:', err); } }; const handleUpdate = async (id, patch) => { try { await updateProduct.mutateAsync({ id, ...patch }); setEditingProduct(null); } catch (err) { console.error('更新失败:', err); } }; const handleDelete = async (id) => { if (window.confirm('确定要删除吗？')) { try { await deleteProduct.mutateAsync(id); } catch (err) { console.error('删除失败:', err); } } }; if (isLoading) return <div className="loading">加载中...</div>; if (error) return <div className="error">错误: {error.message}</div>; return ( <div className="product-list"> <div className="filters"> <input type="text" placeholder="搜索商品..." onChange={handleSearch} /> <select value={filters.category} onChange={(e) => setFilters(prev => ({ ...prev, category: e.target.value })) } > <option value="">所有分类</option> <option value="电子">电子</option> <option value="家居">家居</option> <option value="服装">服装</option> </select> <button onClick={() => setShowForm(true)}>添加商品</button> <button onClick={refetch}>刷新</button> </div> {showForm && ( <ProductForm onSubmit={handleCreate} onCancel={() => setShowForm(false)} /> )} {editingProduct && ( <ProductForm product={editingProduct} onSubmit={(data) => handleUpdate(editingProduct.id, data)} onCancel={() => setEditingProduct(null)} /> )} <div className="products"> {data?.map(product => ( <div key={product.id} className="product-card"> <h3>{product.name}</h3> <p>价格: ${product.price}</p> <p>分类: {product.category}</p> <div className="actions"> <button onClick={() => setEditingProduct(product)}> 编辑 </button> <button onClick={() => handleDelete(product.id)}> 删除 </button> </div> </div> ))} </div> </div> ); } // 表单组件 function ProductForm({ product, onSubmit, onCancel }) { const [formData, setFormData] = useState({ name: product?.name || '', price: product?.price || '', category: product?.category || '' }); const handleSubmit = (e) => { e.preventDefault(); onSubmit(formData); }; return ( <form onSubmit={handleSubmit} className="product-form"> <input type="text" placeholder="商品名称" value={formData.name} onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value })) } required /> <input type="number" placeholder="价格" value={formData.price} onChange={(e) => setFormData(prev => ({ ...prev, price: e.target.value })) } required /> <select value={formData.category} onChange={(e) => setFormData(prev => ({ ...prev, category: e.target.value })) } required > <option value="">选择分类</option> <option value="电子">电子</option> <option value="家居">家居</option> <option value="服装">服装</option> </select> <div className="form-actions"> <button type="submit">保存</button> <button type="button" onClick={onCancel}>取消</button> </div> </form> ); }