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中未定义