Next.js项目点击提交按钮切换Form与Feedback组件的实现方法

我正在学习Next.js与React并开发项目，已创建form.js和feedback.js两个组件，在主页面index.js中引入了form.js。希望点击提交按钮将数据发送至数据库后，用feedback.js替换form.js组件，求实现方法。

现有文件代码 #

form.js #

import styles from '../styles/Home.module.css'

export default function Form({ onSubmitSuccess }) {
    const handleSubmit = async (e) => {
        e.preventDefault();
        const formData = new FormData(e.target);
        const data = Object.fromEntries(formData);

        try {
            const res = await fetch('/api/submit-form', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(data),
            });

            if (res.ok) {
                onSubmitSuccess();
            }
        } catch (err) {
            console.error('提交失败:', err);
        }
    };

    return(
        <>
            <form onSubmit={handleSubmit}>
                <label>Name</label>
                <input 
                    type="text" 
                    name="Name" 
                    pattern="[A-Za-z]+"
                    title="Your name"
                    required
                ></input>

                <label>Surname</label>
                <input 
                    type="text" 
                    name="Surname" 
                    pattern="[A-Za-z]+"
                    title="Your surname"
                    required
                ></input>

                <label>Email</label>
                <input 
                    type="email" 
                    name="email" 
                    pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
                    required
                ></input>

                <button className={styles.btn} type="submit">Send</button>
            </form>
        </>
    )
}

feedback.js #

import styles from '../styles/Home.module.css'

export default function SuccessForm(){
    return(
        <>
            <h3>Form sent successfully</h3>
        </>
    )
}

index.js #

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import Form from '../components/form'
import SuccessForm from '../components/feedback'
import { useState } from 'react'

export default function Home({utenti}) {
    const [formSubmitted, setFormSubmitted] = useState(false);

    const handleSubmitSuccess = () => {
        setFormSubmitted(true);
    };

    return (  
        <>
            <header className={styles.header}>
                <a><h1>LOGO</h1></a>
            </header>
            
            <div className={styles.hero}>
                <div className={styles.sectionSX}>
                    <h3>Hello</h3>
                </div>

                <div className={styles.sectionDX}>
                    {formSubmitted ? <SuccessForm /> : <Form onSubmitSuccess={handleSubmitSuccess} />}
                </div>
            </div>
        </>
    )
}

创建后端API路由（Next.js） #

在pages/api目录下新建submit-form.js，用来处理表单提交并写入数据库：

export default async function handler(req, res) {
    if (req.method === 'POST') {
        try {
            // 替换为你的实际数据库写入逻辑
            const formData = req.body;
            // 示例：使用MongoDB时的保存操作
            // await FormModel.create(formData);
            
            res.status(200).json({ message: '提交成功' });
        } catch (err) {
            res.status(500).json({ message: '提交失败' });
        }
    } else {
        res.status(405).json({ message: '不支持的请求方法' });
    }
}

实现步骤说明 #

• 状态控制：在Home组件中通过useState创建formSubmitted状态，控制组件切换。
• 表单提交处理：修改Form组件，用异步函数处理提交事件，阻止默认表单跳转，将数据通过POST请求发送到API路由。
• 组件切换触发：请求成功后调用父组件传递的onSubmitSuccess回调，更新状态实现组件切换。
• 后端处理：API路由接收表单数据，完成数据库写入后返回成功响应。

内容的提问来源于stack exchange，提问作者DiegoM