首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Redux-表单在onSubmit成功后无法重定向

Redux是一个用于管理JavaScript应用程序状态的可预测的状态容器。它是一个独立于任何特定UI库的状态管理工具,适用于各种类型的应用程序,包括前端开发。

在Redux中,表单在onSubmit成功后无法直接重定向,是因为Redux本身是一个状态管理工具,它通过一个单一的状态树来管理应用的状态,并且所有的状态改变都是通过派发(action dispatch)来触发的。当表单提交成功后,Redux的状态并不知道要进行重定向操作。

为了解决这个问题,有以下两种常见的方法:

  1. 使用React Router:React Router是一个用于处理页面导航和路由的库,可以与Redux很好地集成。当表单提交成功后,可以在Redux中派发一个action,并在对应的reducer中更新相应的状态。在提交成功的回调函数中,使用React Router的history对象进行页面重定向。

示例代码:

代码语言:txt
复制
import { useHistory } from 'react-router-dom';

const MyForm = () => {
  const history = useHistory();

  const onSubmit = () => {
    // 提交表单逻辑
    // ...

    // 表单提交成功后重定向到指定页面
    history.push('/success-page');
  }

  return (
    <form onSubmit={onSubmit}>
      {/* 表单内容 */}
    </form>
  );
}
  1. 使用window.location进行重定向:在表单提交成功后,直接使用window.location.hrefwindow.location.replace进行页面重定向。这种方法不需要额外引入React Router,但需要注意与Redux的状态管理相结合时可能存在一些问题,如重新加载页面会导致Redux的状态重置等。

示例代码:

代码语言:txt
复制
const MyForm = () => {
  const onSubmit = () => {
    // 提交表单逻辑
    // ...

    // 表单提交成功后重定向到指定页面
    window.location.href = '/success-page';
    // 或者
    // window.location.replace('/success-page');
  }

  return (
    <form onSubmit={onSubmit}>
      {/* 表单内容 */}
    </form>
  );
}

总结:

  • Redux是一个可预测的状态容器,用于管理JavaScript应用程序的状态。
  • 表单在Redux中无法直接进行重定向,需要借助其他工具或方法来实现。
  • 使用React Router可以与Redux很好地集成,在表单提交成功后使用history.push进行重定向。
  • 或者直接使用window.location.hrefwindow.location.replace进行页面重定向,但需要注意可能存在的一些问题。
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

form实现表单提交的各种方法(表单提交源码)

比如一个表单里的提交按钮所指向的处理页面不同,这样由于表单在定义的时候就已经确定下表单数据的处理页面,所以单纯地在表单里放多个提交按钮是没有办法达到目的的。这就需要javascript。...当不写type属性时,其type的默认值是submit,点击的话也会直接提交数据 使用form的onsubmit()方法对表单数据进行 验证 再提交 <form id="form1" action="...验证不通过 return false; } document.getElementById("form1").submit(); } 使用ajax对数据进行 验证...result) { console.log(result); //打印服务端返回的数据(调试用) if (result.resultCode == 200) { alert("提交成功...后来有人想到了一种办法,来解决这个问题,那边是服务端重定向(服务端重定向针对异步请求无效) 消除自动填充:通过添加readonly&onfocus =“this.removeAttribute('readonly

5.3K30
  • React技巧之重定向表单提交

    bobbyhadz.com/blog/react-redirect-after-form-submit[1] 作者:Borislav Hadzhiev[2] 正文从这开始~ 总览 使用React Router重定向表单提交...event.preventDefault(); // ️ redirect to /contacts navigate('/contacts'); }; return ( <form onSubmit...比如form表单被提交或者按钮被点击。 navigate 函数可以被传递一个数值。比如说,1表示返回上一页,1表示前进一页或一个路径,例如navigate('/about')。...所以如果用户点击后退按钮,他们将无法导航到前一个页面。 这是很有用的。举个例子,当用户登录成功,你不想让用户点击后退按钮,然后回到登录页面时,就可以使用replace配置。...或者,你有一个路由需要重定向到其他页面时,你不想让用户点击后退按钮,然后再次重定向,也可以使用replace配置。

    1.3K10

    通过 Laravel 创建一个 Vue 单页面应用(六)

    如果您需要跟上,我们在 第5部分  中停止了删除用户的功能,以及在成功删除如何重定向用户。我们还研究了如何将 HTTP 客户机提取到一个专用模块中,以便在整个应用程序中重用。...让我们在不定义路由的情况下完善 UsersCreate 组件中 onSubmit() 方法,这样我们能快捷的看到提交表单时产生的错误: methods: { onSubmit($event) {...id":51, "name":"Paul Redmond", "email":"paul@example.com" } } 如果您提交的数据无效,您将收到类似的消息,如下所示: 提交成功...我们已经处理了服务器错误或验证错误的情况;让我们通过创建成功的用户来结束。...我们将清除表单并重定向到用户的编辑页: onSubmit($event) { this.saving = true this.message = false api.create

    3.8K20

    通过 Laravel 创建一个 Vue 单页面应用(四)

    然后我们在 Promise 上链接一个回调方法,在 API 成功执行之后设置成功提示信息,并设置最新的用户数据。2000 毫秒我们置空提示信息,这同样会隐藏模板中的消息。...未来,我们会回头重写错误(服务端错误或者验证错误)处理,但是现在,我们略过这一部分,专注在请求成功的处理。 我们通过 this.saving 来确定我们是否在更新用户信息。...1rem; width: 50%; border: 1px solid $darkRed; border-radius: 5px; } 作业 目前,当用户信息更新成功...我的目标为:设置提示消息,并将用户重定向回先前的位置(即, /users 页)。 第二个目标,在表单底部添加一个 返回 或 取消 按钮,来放弃更新,并返回上一页。...并在表单成功提交,清除错误消息。 下一步 处理完用户的更新,我们将注意力转移到删除用户上。删除用户将有助于演示成功删除以在代码中进行跳转。

    2K10

    邮件狂欢:Next.js和Resend SDK的电子邮件魔法

    请确保您通过电子邮件注册收到的电子邮件中单击“确认帐户”按钮来确认您的帐户。之后,您将被重定向到重新发送仪表板。下一步是按照以下步骤创建 API 密钥:导航至仪表板左侧的API 密钥部分。...您将被重定向到 DNS 提供商页面,您可以在其中添加 DNS 记录。添加您从重新发送仪表板复制的所有 DNS 记录。然后单击“添加”按钮。接下来,导航回重新发送仪表板并单击验证 DNS 记录按钮。...验证完成,您将收到一封电子邮件通知。验证成功,您的仪表板状态将更改为“已验证”。现在您可以从经过验证的域发送电子邮件。...您应该看到启动器 UI:现在您已经成功运行了 Next.js 项目,请.env.local在项目的根目录中创建该文件。将为您生成的重新发送 API 密钥添加到此文件中。...toast从库导入react-hot-toast,在成功发送电子邮件显示通知。定义一个名为 的异步函数onSubmit来在用户提交表单时处理表单提交。

    1.6K00

    【JS】1891- 悄无声息间,你的 DOM 被劫持了?

    下次网站尝试使用此功能时,它将无法正常工作,甚至可能运行恶意代码。 我们想象现在有一个带有用户反馈功能的基本 Web 应用程序。用户输入自己的姓名和反馈消息,然后提交。...value="Submit"> JavaScript: document.querySelector('form').onsubmit...id="feedbackDisplay">window.location.href='http://conardli.top'; 当表单尝试显示下一条反馈时,就会执行脚本,将用户重定向到恶意网站...form 和 FeedbackElement 变量以及分配给 onsubmit 事件处理程序的函数不在全局作用域内,因此它们不能被劫持。...我们还可以使用 const 来声明常量 — 分配它们我们无法更改的值。它们可以防止重要的变量被意外覆盖。

    15610

    JavaWeb防止表单重复提交的几种方式

    一、表单重复提交的常见应用场景 网络延迟的情况下用户多次点击submit按钮导致表单重复提交 用户提交表单,点击【刷新】按钮导致表单重复提交(点击浏览器的刷新按钮,就是把浏览器上次做的事情再做一次,因为这样也会导致表单重复提交...) 用户提交表单,点击浏览器的【后退】按钮回退到表单页面后进行再次提交 二、防止防止表单重复提交的方式 1、利用JavaScript防止表单重复提交 (1)、用JavaScript控制Form表单只能提交一次...主要代码: <form action="${pageContext.request.contextPath}/servlet/DoFormServlet" onsubmit="return dosubmit...初始时为true可以提交,在前端向服务器发出请求,服务端响应结果没有回来之前将该值置为false,正常响应时再置为true。...(5)、提交重定向到一个提交成功的页面 表单提交跳转到另外一个成功页面。这样可以避免用户按F5导致的重复提交,浏览器也不会出现表单重复提交的警告,以及消除按浏览器前进和后退按导致的同样问题。

    2.2K20

    从零到部署:用 Vue 和 Express 实现迷你全栈电商应用(七)

    我们打算在下面的 ProductForm 组件中进行修复表单无法编辑的问题。...modelData 对象导入所有表单内组件中,解决其他表单内组件无法编辑的问题。...; }) } } 这里我们首先导入了 element-ui 组件库提供的 Message 消息提示组件,并在网络请求成功之后添加成功消息提醒,在请求失败之后添加失败消息提醒。...解决表单信息修改无法显示最新 重构到这里相信有些朋友已经迫不及待地将项目跑起来了,但是总是事与愿违,但是大家丝毫不用方,只要您跟着我们一步一步脚踏实地地去分析问题,那么什么问题都会迎刃而解了。...manufacturer; }); state.manufacturer = newManufacturer; }, // ... } 小结 这一节我们主要带大家分析并尝试解决了表单信息修改无法显示最新信息的问题

    1.5K20

    Redis Cluster搭建高可用Redis服务器集群

    一、Redis Cluster集群简介 Redis Cluster是Redis官方提供的分布式解决方案,在3.0版本推出的,有效地解决了Redis分布式的需求,当一个节点挂了可以快速的切换到另一个节点...Redis实例负责其中一部分slot,集群中的所有信息(节点、端口、slot等),都通过节点之间定期的数据交换而更新,Redis客户端可以在任意一个Redis实例发出请求,如果所需数据不在该实例中,通过重定向命令引导客户端访问所需的实例...三、集群搭建 要让集群正常工作至少需要3个主节点,一共就需要6个节点,其中3个为主节点,3个为从节点,为了简单在下面在一台机器上演示,演示使用了linux服务器上7000到7005的6个端口。...,必须配置,否则无法启动 启动6个Redis实例,并且要指定配置文件,这些配置文件分别在各自的子目录下面 ....Redis Cluster启动成功截图 如果一切顺利,你会看到类似截图上的消息: [OK] All 16384 slots covered, 这说明Redis的Cluster集群环境搭建成功

    1.4K30

    React 应用架构实战 0x6:实现用户认证和全局通知

    并使其对应用程序可用 由于身份验证是基于 cookie 的,带有 httpOnly cookie,因此我们不需要在前端处理身份验证令牌,任何后续请求都将自动包括令牌 调用 /auth/me 接口将处理页面刷新的用户数据持久化...(onSubmit)} spacing="5" w="full"> <InputField label="Email" type="email"...我们希望确保任何这样的尝试都将重定向用户到登录页面。为此,我们要创建一个组件,它将包装受保护的资源,并允许用户查看受保护的内容,只有在他们经过身份验证的情况下才能访问。...# 通知提示 每当应用程序有事情发生,例如表单成功提交或 API 请求失败,我们都希望通知用户。 我们需要创建一个全局存储,用于跟踪所有通知。...-- ... --> ); }; export default DashboardCreateJobPage; 提交成功可以看到通知: 另一个可以利用通知的地方是 API

    1.5K20

    常见的面试问题

    第一次握手,客户端发了个连接请求消息到服务端,服务端收到信息后知道自己与客户端是可以连接成功的,但此时客户端并不知道服务端是否已经接收到了它的请求,所以服务端接收到消息的应答,客户端得到服务端的反馈...我们来看一下,假设一下如果没有第三次握手,而是两次握手我们就认为连接成功了,那么会发生什么?第三次握手是为了防止已经失效的连接请求报文段突然又传到服务端,因而产生错误。...3XX(重定向) 表示要完成请求,需要进一步操作。 通常,这些状态代码用来重定向。...代表需要客户端采取进一步的操作才能完成请求,这些状态码用来重定向,后续的请求地址(重定向目标)在本次响应的 Location 域中指明。这系列中最常见的有301、302状态码。...hashtable(哈希) 当哈希类型无法满足ziplist要求时,redis会采用hashtable做为哈希的内部实现,因为此时ziplist的读写效率会下降

    75510

    一款轻量级Web漏洞教学演示系统(DSVW)

    users 字段名 字段类型 id INTEGER username TEXT name TEXT surname TEXT password TEXT users 中的内容: id username...: 当Web应用程序接受不受信任的输入时,可能会导致Web应用程序将请求重定向到包含在不受信任的输入中的URL,从而可能导致未经验证的重定向和转发。...通过将不受信任的URL输入修改为恶意网站,攻击者可能会成功启动网络钓鱼诈骗并窃取用户凭据。 由于修改链接中的服务器名称与原始网站相同,因此网络钓鱼尝试可能具有更可信的外观。...未验证的重定向和转发攻击也可用于恶意制作一个URL,该URL将通过应用程序的访问控制检查,然后将攻击者转发到他们通常无法访问的特权功能。...往往会造成正常用户的无法打开或无法访问等一系列问题。 漏洞地址: http://127.0.0.1:65412/?

    1.8K100
    领券