使用 TypeScript + React 19 创建多步骤表单

第一步：设置项目

首先，使用 Create React App 创建一个新的 TypeScript 项目：

npx create-react-app multi-step-form --template typescript
cd multi-step-form
npm start

第二步：创建类型定义

在 src 目录下创建一个 types.ts 文件，用于定义表单数据的类型。

types.ts

export interface FormData {
    name: string;
    age: number | '';
    email: string;
    phone: string;
}

第三步：创建组件

我们将创建多个组件，每个组件对应表单的一个步骤。假设我们有三个步骤：个人信息、联系方式和确认信息。

1. 创建步骤组件

在 src 目录下创建一个 components 文件夹，并在其中创建以下文件：

• Step1.tsx
• Step2.tsx
• Confirmation.tsx

Step1.tsx

import React from 'react';
import { FormData } from '../types';

interface Step1Props {
    nextStep: () => void;
    handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
    values: FormData;
}

const Step1: React.FC<Step1Props> = ({ nextStep, handleChange, values }) => {
    return (
        <div>
            <h2>步骤 1: 个人信息</h2>
            <label>
                姓名:
                <input type="text" name="name" value={values.name} onChange={handleChange} />
            </label>
            <br />
            <label>
                年龄:
                <input type="number" name="age" value={values.age} onChange={handleChange} />
            </label>
            <br />
            <button onClick={nextStep}>下一步</button>
        </div>
    );
};

export default Step1;

Step2.tsx

import React from 'react';
import { FormData } from '../types';

interface Step2Props {
    prevStep: () => void;
    nextStep: () => void;
    handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
    values: FormData;
}

const Step2: React.FC<Step2Props> = ({ prevStep, nextStep, handleChange, values }) => {
    return (
        <div>
            <h2>步骤 2: 联系方式</h2>
            <label>
                邮箱:
                <input type="email" name="email" value={values.email} onChange={handleChange} />
            </label>
            <br />
            <label>
                电话:
                <input type="tel" name="phone" value={values.phone} onChange={handleChange} />
            </label>
            <br />
            <button onClick={prevStep}>上一步</button>
            <button onClick={nextStep}>下一步</button>
        </div>
    );
};

export default Step2;

Confirmation.tsx

import React from 'react';
import { FormData } from '../types';

interface ConfirmationProps {
    prevStep: () => void;
    values: FormData;
    handleSubmit: () => void;
}

const Confirmation: React.FC<ConfirmationProps> = ({ prevStep, values, handleSubmit }) => {
    return (
        <div>
            <h2>确认信息</h2>
            <p>姓名: {values.name}</p>
            <p>年龄: {values.age}</p>
            <p>邮箱: {values.email}</p>
            <p>电话: {values.phone}</p>
            <button onClick={prevStep}>上一步</button>
            <button onClick={handleSubmit}>提交</button>
        </div>
    );
};

export default Confirmation;

第四步：主组件

在 src 目录下创建一个 MultiStepForm.tsx 文件，管理所有步骤的状态和导航。

MultiStepForm.tsx

import React, { useState } from 'react';
import Step1 from './components/Step1';
import Step2 from './components/Step2';
import Confirmation from './components/Confirmation';
import { FormData } from './types';

const MultiStepForm: React.FC = () => {
    const [step, setStep] = useState<number>(1);
    const [formData, setFormData] = useState<FormData>({
        name: '',
        age: '',
        email: '',
        phone: ''
    });

    const nextStep = () => setStep(step + 1);
    const prevStep = () => setStep(step - 1);

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const { name, value } = e.target;
        setFormData({ ...formData, [name]: value });
    };

    const handleSubmit = () => {
        alert('表单已提交！');
        console.log(formData);
    };

    switch (step) {
        case 1:
            return (
                <Step1 nextStep={nextStep} handleChange={handleChange} values={formData} />
            );
        case 2:
            return (
                <Step2 prevStep={prevStep} nextStep={nextStep} handleChange={handleChange} values={formData} />
            );
        case 3:
            return (
                <Confirmation prevStep={prevStep} values={formData} handleSubmit={handleSubmit} />
            );
        default:
            return null;
    }
};

export default MultiStepForm;

第五步：更新 App.tsx

最后，在 src/App.tsx 中引入并使用 MultiStepForm 组件。

App.tsx

import React from 'react';
import MultiStepForm from './MultiStepForm';

const App: React.FC = () => {
    return (
        <div className="App">
            <h1>多步骤表单示例</h1>
            <MultiStepForm />
        </div>
    );
};

export default App;

第六步：运行应用

确保所有文件都已保存，然后在终端中运行：

npm start

你应该能够看到一个多步骤表单，用户可以逐步填写信息并最终提交。

总结

通过这个教程，你学习了如何在 React 中使用 TypeScript 创建一个简单的多步骤表单。

你可以根据需要扩展这个示例，添加更多的步骤、字段或验证逻辑，以满足特定的需求。

使用 TypeScript 有助于提供类型安全性，使代码更易于维护和理解。