javascript - How to reload pagerouter in handleSubmit method after submit? - Stack Overflow

admin管理员组

文章数量:1356815

I have a ponent with a login form.

What I need to do is to get it to reload the page / route after the user clicks the submit button.

The reason for this is that after the submit button is clicked some changes are needed on the nav ponent which is not this one.

You can see that I use sessionStorage.setItem('something', 'somevalue'); which then the nav ponent reads and makes some changes.

At the moment to get to see the changes I need to reload the browser.

Here is the code:

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;

How can I fix this problem?

I have a ponent with a login form.

What I need to do is to get it to reload the page / route after the user clicks the submit button.

The reason for this is that after the submit button is clicked some changes are needed on the nav ponent which is not this one.

You can see that I use sessionStorage.setItem('something', 'somevalue'); which then the nav ponent reads and makes some changes.

At the moment to get to see the changes I need to reload the browser.

Here is the code:

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;

How can I fix this problem?

• javascript
• reactjs

Share Improve this question Follow edited Jan 15, 2018 at 15:54 TylerH 21.1k7878 gold badges7979 silver badges114114 bronze badges asked Jun 29, 2017 at 21:02 user8159753user8159753

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

A good idea would be to use onEnter callbacks in your routes or subscribe to changes on sessionStore (is that a redux store?) to check for updates, and allow that information to propagate down through the app.

To answer your question about navigation, however, you can use either:

location.reload() - location is a standard JavaScript (browser) object

or inject React Router's router using the provided withRouter ponent enhancer.

import { withRouter } from 'react-router'

...

export default withRouter(Login);

router will be available in props - you can use it like

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

this will trigger a view change without reloading the window (which is why I was suggesting making sure that you can update your ponent's knowledge about the session without reloading the page)

edit - by the way event is undefined in handleSubmit

I'm going to propose a more drastic (and maybe more scalable) solution. It sounds like you want to access the state of your <Login /> ponent within at least one other, sibling or parent, ponent.

One method for doing this would be to use a state management solution like Redux. A solution using Redux would be beyond the scope of a solution here, but definitely look into it as it might be the optimal solution.

That said, there's another way we can tackle this - by maintaining state in a parent ponent and passing the username and password state as props to the various ponents that need them.

To do this we'll create a parent ponent <App /> which will contain 2 child ponents:

• <Login />
• <Nav />

The login ponent will be the form you already have, with some minor changes. Instead of maintaining it's own state, it will receive the handleSubmit function as a prop from it's parent.

class Login extends React.Component {
  render() {
    return (
      <div>
        <form className="form-signin" onSubmit={this.props.handleSubmit}>
          <input type="text" name="username" />
          <input type="password" name="password" />
          <input type="submit" value="Submit" />
        </form>
      </div>
    );
  }
}

You'll notice the form is using this.props.handleSubmit for the onSubmit event. We'll get to this below.

We'll also create a <Nav /> ponent to show the user's name, which will receive a username prop.

class Nav extends React.Component {
  render() {
    return (
      <nav>
        Nav
        <div style={{ float: "right" }}>
          {this.props.username && `Wele ${this.props.username}`}
        </div>
      </nav>
    );
  }
}

Again, you'll notice we're using this.props.username to display the user's name. We'll get to this below.

Finally, we'll create our parent ponent <App /> where all the magic happens.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: "",
      password: ""
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();

    this.setState({
      username: event.target.elements.username.value,
      password: event.target.elements.password.value
    });

    // Do your session storage here if needed
    // sessionStorage.setItem('something', 'somevalue');
  }

  render() {
    return (
      <div>
        <Nav username={this.state.username} />
        <Login
          handleSubmit={this.handleSubmit}
        />
      </div>
    );
  }
}

That's a lot to take in at first glance. In short, this ponent is maintaining the state, and passing a handleSubmit function to the <Login /> ponent. When the login form is submitted, the username and password are stored in state in the this <App /> ponent instead of being confined to theponent. This allows us to pass theusernameandpassworddown as props to any other child ponents. Like the` ponent.

You'll remember in the <Nav /> ponent we used this.props.username. When the login form is submitted, it updates the state in the <App /> ponent which then passes the username to the <Nav /> ponent for use.

Here's a Codepen showing the app in action.

本文标签： javascriptHow to reload pagerouter in handleSubmit method after submitStack Overflow