简体   繁体   中英

How do I redirect user to another page after submit the form?

I want to redirect the user after submit the form in react JavaScript, example when user submit the form he/she redirect to google.com or some other URL with he/she information what he/she entered in the input filed. I created simple with one filed and submit button.

Here my sample code

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
class App extends Component {
  state = {
    firstName: '',
    showName: false
  }
  inputHandler = (e) => {
    let updatedName = e.target.value;
    this.setState({ firstName: updatedName });
    //console.log(updatedName);  
  }
  onSubmitHandler = (e) => {
    e.preventDefault();
    this.setState({
      showName: true
    });
  }
  render() {
    return (
      <div>
        <form
          onSubmit={this.onSubmitHandler}>
          <label>Enter the Name</label>
          <input type="text"
            name="firstName" onChange={this.inputHandler} value=
            {this.state.firstName} />
          <button type="submit" onClick={this.onSubmitHandler}>Submit</button>
          {this.state.showName && <p>"FirstName: " {this.state.firstName}</p>}
        </form>
      </div>
    );
  }
}
export default (App);

You can redirect using the this.props.history.push method.

  onSubmitHandler = (e) => {
    e.preventDefault();
   this.props.history.push('/dashboard')
  }
onSubmitHandler = (e) => {
    e.preventDefault();
    this.setState({
      showName: true
    });
    window.location.href = "someurl/somepage?var1="+this.state.var1+"&var2="+this.state.var2 + "......";
  }
Checking(event) {
    event.preventDefault();
    if (this.state.username === "" || this.state.password === "") {
      alert("Fields are required");
      return;
    }
    if (this.state.username == "subrata" && this.state.password === "1234") {
      this.props.history.push('/adminpanel')
      return;
    }else{
      alert("Login Failed ! . Check Username and Password.")
    }
     
    console.log(`${this.state.username}`)
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM