以多步形式处理浏览器后退按钮

当用户转到我的3部分表单中的下一步时，url不会更改，因为我只是在更改状态。问题是他们无法返回并使用浏览器按钮修改表单。花整个下午都试图解决这一问题后，这里是我得到的最接近：以多步形式处理浏览器后退按钮

onBackButtonEvent = (e) => { 
    console.log('handling back button press', e) 
    if (typeof e !== 'undefined') { 
     e.preventDefault() 
     console.log(e); 
    } 
    } 

    componentDidMount =() => { 
    window.onpopstate = this.onBackButtonEvent(); 
    }

来源

2017-08-29 Tyler L

这不值得你重新发明。查看React-Router。 – gravityplanx

你为什么不在你的url中使用哈希，并使用'location.hash'来检查它们？或者使用'react-router'。 – Phil

像批评家上面提到的，你最好的选择将是使你的表单页面作为单独的组件，并委派浏览器导航的担忧反应-路由器。你可以在React Router docs阅读更多关于它的信息。下面，我已经展示了一些基本的东西，你可以添加到你的应用程序中，将表单重新分解为一些组件。

// index.js (or file where you add your App to dom) 
import { BrowserRouter } from 'react-router-dom'; 

ReactDOM.render(
    <BrowserRouter> 
    <App /> 
    </BrowserRouter>, 
    document.getElementById('root') 
); 


// App.js 
import { Route } from 'react-router-dom' 

// render 
<Route exact path="/form/page1" render={(props) => (
    <FormPage1 
    {...props} 
    necessaryProp={this.state.necessaryProp} 
    handleSubmit={this.props.handleSubmit} /> 
)} /> 

<Route exact path="/form/page2" render={(props) => (
    <FormPage2 
    {...props} 
    necessaryProp={this.state.necessaryProp} 
    handleSubmit={this.props.handleSubmit} /> 
)} />

你可以玩弄使用您的网页组件的componentDidMount或componentWillMount生命周期事件验证...

要更改的页面，您可以提交表单，并处理它基于该做的网页＃提交。另一种方法是在页面组件内部使用<Link to="/form/page2" />。最后，您可以使用的第三种方法是在按钮上使用onClick处理程序执行验证。如果表单有效，请使用props.history.push('/form/page2')以编程方式重定向...实现细节取决于您！

关键是React路由器抽象浏览器导航问题，处理跨浏览器效果，并且你正在寻找。

来源

2017-08-29 22:41:02

以这种方式使用React Router时，处理多页面状态的好方法是什么？我的应用程序在向导结尾处有确认并保留。我可以将状态保存在中，并传递给,等，使用状态来呈现其中一个或另一个 - 但浏览器历史记录不起作用。所以，React Router似乎是正确的解决方案......但是后来我看到了三种选择：a）在每一步之后坚持下去，b）将多页面状态一直提升到App，因为这是路由的地方，或者c）使用像Redux这样的东西。有没有更简单的方法，我失踪了？ – Spencer

我建议使用Redux来处理存储状态。 Redux基本上会为你做'b'和'c'，并且如果使用[受控表单组件]（https://reactjs.org/docs/forms.html#controlled-components）实现，也会做'a'。 ''和''等将在组件中具有逻辑来验证它们所代表的状态的部分。将表单状态存储在不同的缩减器中 - 与永久数据模型分开 - 通常是有帮助的，直到最终提交为止，所以后退/前进导航不会让您感到兴奋。 –

以多步形式处理浏览器后退按钮

回答

相关问题