Next.js联系我们表单提交成功后如何跳转至外部链接？

你只需要在表单提交成功的逻辑分支中添加浏览器跳转代码即可，具体修改方案如下：

核心修改点 #

• 找到handleContactFormSubmit方法中提交成功的try代码块，在onClose()执行后添加跳转逻辑：
  • 若需要在当前页跳转，使用window.location.href = '你的外部链接地址'
  • 若需要在新标签页打开，使用window.open('你的外部链接地址', '_blank')
• 如果你希望用户先看到成功提交的toast提示再跳转，可以将跳转逻辑包裹在setTimeout中设置延时执行。

完整修改后代码 #

import {
  Button,
  FormControl,
  FormLabel,
  Input,
  ModalHeader,
  ModalFooter,
  ModalBody,
  ModalCloseButton,
  useToast,
} from '@chakra-ui/react'
import { useState } from 'react'
import { API } from "aws-amplify"
import { createCandidate } from '../src/graphql/mutations'

export const ContactForm = ({ initialRef, onClose }) => {
  const toast = useToast()
  const [formState, setFormState] = useState({
    name: '',
    designation: '',
    companyname: '',
    email: '',
    phone: '',
    comments: '',
  })

  const handleContactFormSubmit = async (e) => {
    e.preventDefault()
    const { name, designation, companyname, email, phone, comments} = formState
    if (name && designation && companyname && email && phone && comments) {
      try {
        await API.graphql({
          query: createCandidate,
          variables: {
            input: {
              name,
              designation,
              companyname,
              email,
              phone,
              comments,
            },
          },
        })

        toast({
          title: 'Congratulations',
          position: 'top-right',
          description: 'Successfully submitted!',
          status: 'success',
          duration: 5000,
          isClosable: true,
        })
        onClose()
        // 此处添加跳转逻辑，示例为延时3秒后当前页跳转，替换为你实际的外部链接即可
        setTimeout(() => {
          window.location.href = 'https://你的外部链接地址'
        }, 3000)
      } catch (e) {
        toast({
          title: 'Error',
          position: 'top-right',
          description: e.message,
          status: 'error',
          duration: 5000,
          isClosable: true,
        })
      }
    } else {
      toast({
        title: 'Uh-Oh 😥',
        position: 'top-right',
        description: 'Please verify all fields are filled out.',
        status: 'error',
        duration: 5000,
        isClosable: true,
      })
    }
  }

  return (
    <>
      <ModalHeader>Enter Your Details</ModalHeader>
      <ModalCloseButton />
      <form onSubmit={handleContactFormSubmit}>
        <ModalBody pb={6}>
          <FormControl>
            <FormLabel>Name</FormLabel>
            <Input
              ref={initialRef}
              placeholder=""
              value={formState.name}
              onChange={(e) =>
                setFormState({ ...formState, name: e.target.value })
              }
            />
          </FormControl>

          <FormControl mt={4}>
            <FormLabel>Designation</FormLabel>
            <Input
              placeholder=""
              value={formState.designation}
              onChange={(e) =>
                setFormState({ ...formState, designation: e.target.value })
              }
            />
          </FormControl>

          <FormControl mt={4}>
            <FormLabel>Company Name</FormLabel>
            <Input
              placeholder=""
              value={formState.companyname}
              onChange={(e) =>
                setFormState({ ...formState, companyname: e.target.value })
              }
            />
          </FormControl>

          <FormControl mt={4}>
            <FormLabel>Email</FormLabel>
            <Input
              placeholder=""
              type="email"              
              value={formState.email}
              onChange={(e) =>
                setFormState({ ...formState, email: e.target.value })
              }
            />
          </FormControl>
          <FormControl mt={4}>
            <FormLabel>Phone Number</FormLabel>
            <Input
              placeholder=""
              minLength="10"
              value={formState.phone}
              onChange={(e) =>
                setFormState({ ...formState, phone: e.target.value })
              }
            />
          </FormControl>

          <FormControl mt={4} >
            <FormLabel>I would like to know about</FormLabel>
            <Input
              placeholder=""
              value={formState.comments}
              onChange={(e) =>
                setFormState({ ...formState, comments: e.target.value })
              }
            />
          </FormControl>
        </ModalBody>

        <ModalFooter>
          <Button colorScheme="red" mr={3} type="submit">
            Submit
          </Button>
          <Button onClick={onClose}>Cancel</Button>
        </ModalFooter>
      </form>
    </>
  )
}

注意事项 #

• 使用window.open打开新标签页时部分浏览器会触发弹窗拦截，建议优先使用当前页跳转的方案
• 延时时间可根据需求调整，不需要延时可以直接删除setTimeout包裹，直接写跳转代码即可

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