javascript - 提交后如何在 handleSubmit 方法中重新加载页面/路由器？

Question

我有一个带有登录表单的组件。

我需要做的是让它在用户点击提交按钮后重新加载页面/路由。

原因是点击提交按钮后，需要对导航组件进行一些更改，而这不是这个。

您可以看到我使用了 sessionStorage.setItem('something', 'somevalue'); 然后导航组件读取并进行了一些更改。

目前要查看更改，我需要重新加载浏览器。

代码如下:

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: '',
    };

    this.onUsernameChange = this.onUsernameChange.bind(this);
    this.onPasswordChange = this.onPasswordChange.bind(this);
  }

  onUsernameChange(event) {
    this.setState({ username: event.target.value });
  }

  onPasswordChange(event) {
    this.setState({ password: event.target.value });
  }

  handleSubmit() { 
    event.preventDefault();
    sessionStorage.setItem('something', 'somevalue');
    // reload the page here or re-router to current page/router

  }

  render() {

    return (
        <div>
          <form className="form-signin" onSubmit={this.handleSubmit}>
            <input type="text" value={this.username} onChange={this.onUsernameChange} />
            <input type="password" value={this.password} onChange={this.onPasswordChange} />
            <input type="submit" value="Submit" />
          </form>
        </div>
    );
  }
}

export default Login;

我该如何解决这个问题？

Answer 1

一个好主意是在您的路由中使用 onEnter 回调或订阅 sessionStore 上的更改(这是一个 redux 商店吗？)检查更新，并允许该信息通过应用向下传播。

但是，要回答有关导航的问题，您可以使用以下任一方法:

location.reload() - location 是一个标准的 JavaScript(浏览器)对象

或者使用提供的 withRouter 组件增强器注入(inject) React Router 的 router。

import { withRouter } from 'react-router'

...

export default withRouter(Login);

router 将在 props 中可用 - 你可以像这样使用它

const { router } = this.props
router.push('/some/route')

这将触发 View 更改无需重新加载窗口(这就是为什么我建议确保您可以在不重新加载页面的情况下更新组件关于 session 的知识)

编辑 - 顺便说一句，event 在 handleSubmit

中未定义