Question

当用户进入我的3部分表格的下一步时，网址不会改变，因为我只是改变状态。问题是他们无法返回并使用浏览器按钮修改表单。花了整整一个下午试图解决这个问题，这是我最接近的：

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

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

Answer 1

与上述评论者一样，您最好的选择是将表单页面呈现为单独的组件，并将浏览器导航的关注点委托给React-Router。您可以在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 Router提取浏览器导航问题，处理跨浏览器效果，并且是您正在寻找的。

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

1 个答案: