在reactJs中从一个选项卡切换到另一个选项卡时保持数据

时间:2018-01-03 11:30:00

标签: reactjs react-router

我正在使用React路由器制作标签。

我很难解决一个场景,场景就像是,我们有两个标签 TabX TabY 。在TabX中,我创建了一个将一些数据作为输入的表单。我做了一个按钮Next。点击按钮我使用history.push向其他 TabY 发送参数。

现在,当我切换回 TabX 时,我将丢失之前填写的所有数据。

我无法找到方法,所以如果我切换回另一个标签,数据不会丢失。 还有一件事,我不想使用redux。

2 个答案:

答案 0 :(得分:1)

为了实现您想要的功能,您必须将状态保持在正在安装和卸载的组件之外(TabX)。因为您不想使用像redux这样的状态容器,我建议将状态提升。在此处阅读更多相关信息:https://reactjs.org/docs/lifting-state-up.html

答案 1 :(得分:0)

克服这种情况的一种方法是使用React Router Link。 使用Link,您可以通过“状态”状态。字段,您可以将数据存储在此处,然后也可以执行相同操作以返回其他方式返回数据。

您可以访问此状态'来自this.props.history

https://reacttraining.com/react-router/web/api/Link

我希望这会有所帮助。