以多步形式處理瀏覽器後退按鈕

當用戶轉到我的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'。 ''和''等將在組件中具有邏輯來驗證它們所代表的狀態的部分。將表單狀態存儲在不同的縮減器中 - 與永久數據模型分開 - 通常是有幫助的，直到最終提交爲止，所以後退/前進導航不會讓您感到興奮。 –

以多步形式處理瀏覽器後退按鈕

回答

相關問題