在 Next.js 应用中创建ContactForm表单提交

import { useState } from 'react';
import Router from 'next/router';
import { Box, Button, FormField, TextInput, TextArea } from 'grommet';
import { doc, setDoc } from "firebase/firestore";
import { db } from '../../firebase/config';
 
const ContactForm = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');
 
  const handleSubmit = async (e) => {
    e.preventDefault();
    const contactData = { name, email, message };
    await setDoc(doc(db, 'contacts', 'exampleContact'), contactData);
    Router.push('/success');
  };
 
  return (
    <Box
      as="form"
      onSubmit={handleSubmit}
      width="medium"
      pad="medium"
      gap="medium"
    >
      <FormField label="Name">
        <TextInput name="name" value={name} onChange={(e) => setName(e.target.value)} />
      </FormField>
      <FormField label="Email">
        <TextInput name="email" value={email} onChange={(e) => setEmail(e.target.value)} />
      </FormField>
      <FormField label="Message">
        <TextArea name="message" value={message} onChange={(e) => setMessage(e.target.value)} />
      </FormField>
      <Button type="submit" label="Submit" primary />
    </Box>
  );
};
 
export default ContactForm;

这个代码实例展示了如何在Next.js应用中创建一个简单的ContactForm组件，并处理表单的提交。它使用React状态钩子管理表单输入的状态，并使用Firestore的setDoc函数将表单数据保存到Firebase。最后，当数据保存成功后，它使用Next.js的Router.push函数重定向到一个成功页面。