我有一个react项目,它使用react-router-dom和几个子页面,每个子页面都有表单,并按照一定的顺序填写。
export default function App() {
return (
<div>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="first" element={<First />} />
<Route path="second" element={<Second />} />
<Route path="third" element={<Third />} />
</Routes>
</div>
);
}
我想让我的用户看到Second
和Third
中的表单,但如果没有先在First
中提交表单,就不能在这些页面上提交表单。如何最好地保存这些信息?
我使用this page作为指南试用了Redux,但我惊讶地发现,如果我先单击,提交表单,保存HTTP响应到商店,然后单击离开,它会保存200
一次,然后被覆盖为默认值。解释为什么有点道理,但在这一点上,react-persistent似乎对我的需求来说太繁重了。
是否可以在这里使用Context?我可以做一件显而易见的直观的事情,在Layout
中设置一个“结果”上下文,在First
中设置results.first
,然后在Second
和Third
中使用它而不被覆盖吗?
tl;dr:有没有一个简单的解决方案,我可以在一个子函数中设置一个值,然后在兄弟函数中读回我想要的多次?
1条答案
按热度按时间ffx8fchx1#
如果我理解正确的话,你需要对步骤表单进行某种状态管理。这种风格被称为向导步骤表单。你可以使用现有的库,如react-step-wizard,或者从设计模式中获得灵感来构建自己的。