next.js 如何使用react-hook-form重定向到确认页面？

slmsl1lt 于 11个月前发布在 React

关注(0)|答案(2)|浏览(124)

我正在用nextjs 13，chakra-ui，react-hook-form做一个表单。
有一个文本输入字段，用户把电子邮件地址。（url是xxx/new）
这是我表格：

export const NewForm = () => {
    const {
        register,
        handleSubmit,
        formState: { errors },
        trigger,
        watch,
    } = useForm<NewFormType>();

   
    const onSubmit = handleSubmit((data) => {
        //do something
        console.log(data);
    });

    return (
        <Box>
            <Box>
                <form onSubmit={onSubmit}>                      
                  <FormControl isInvalid={!!errors[`email`]}>
                     <Input
                       id={"email"}
                       type={"email"}
                       {...register("email", {
                                    required: "required",   
                       })}
                     />
                   </FormControl>
                </form>
                <Box>
                    <Button>Confirm</Button>
                </Box>
            </Box>
        </Box>
    );
};

字符串
当用户点击“确认”按钮，我想移动到确认页面的网址xxx/confirm，并显示任何用户把.
我知道如果表单和确认组件在同一页面上，我可以使用状态变量显示/隐藏确认组件，但不确定它们是否在同一页面上。
(also，我不能使用查询参数）
有什么钩子可以使用吗？或者我应该在这种情况下使用Provider？

next.js

来源：https://stackoverflow.com/questions/77684341/how-can-redirect-to-confirmation-page-with-react-hook-form

2条答案

按热度按时间

snz8szmq1#

在这里，你可以使用useRouter Hook重定向到确认页面，使用React上下文在组件之间传递数据。你只需要创建上下文，然后将其值存储在onSubmit处理程序中，如下所示

const { setFormData } = useConfirmationContext();

const onSubmit = handleSubmit((data) => {
    // set the form data in the context
    setFormData(data);
    // navigate to the confirmation page
    router.push(`xxx/confirm`);
});

字符串
然后您可以在确认页面中获取数据，如下所示

const { formData } = useConfirmationContext();

型
请尝试这种方式和更新。

赞(0）回复(0）举报 11个月前

xmakbtuz2#

有很多方法可以通过多个组件来共享状态，比如上下文API或其他状态管理库等。
在我看来，如果你已经在使用react-hook-form，你最好使用react-hook-form内置的'useFormContext'钩子。
https://www.react-hook-form.com/api/useformcontext/
此外，如果你想在next.js中导航到页面，你可能需要从'next/navigation'使用router。
就像这样

import { useRouter } from 'next/navigation'

const router = useRouter();

...
  const onSubmit = handleSubmit((data) => {
        router.push(`xxx/confirm`)
    });
...

个字符

赞(0）回复(0）举报 11个月前

我来回答

next.js 如何使用react-hook-form重定向到确认页面？

2条答案

相关问题

热门标签

最新问答