javascript - 在 React 中提交表单后重定向到 URL

Question

我是 React 的新手，编写了以下将数据发送到 Firebase 的表单，这部分有效，但在提交时我想重定向到 React 应用程序之外的/thankyou.html。

谁能告诉我如何在提交后重定向？

我的表单如下:

import React, { Component } from 'react';
import firebase from '../firebase.js';
class Form extends Component {
  constructor(){
      super();
      this.state = {
          name : "",
          email : "",
          phone : "",
          message : "",
          formError: false
      }
  }

  getName = (e) =>{
    let username = e.target.value; 
    this.setState({
        name: username
    });
  }

  
  getPhone = (e) =>{
    let userphone = e.target.value; 
    this.setState({
        phone: userphone
    });
  }
  
  
  getEmail = (e) =>{
    let userEmail = e.target.value; 
    //the most important thing is that we use a RegEx
    //in order to manage the input of the email
    //at least we can get a some what valid email
    if(userEmail.match(/^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/)){
      this.setState({
        email: userEmail
    });
      }else{
        this.setState({
          email: ""
      });
    }
  
  }

  
  getDescription = (e) =>{
    let userMessage = e.target.value; 
    this.setState({
        message: userMessage
    });
  }
  //send the form
  submitForm = (e) =>{
    e.preventDefault()
    const itemsRef = firebase.database().ref('items');
    if(this.state.name === "" || this.state.email === "" ||  this.state.phone === "" || this.state.message === "" ){
     this.setState({
        formError: true
     })
       return false;
    }else{
        this.setState({
            formError: false
         })
         const item = {
          Name: this.state.name,
          Email: this.state.email,
          Phone: this.state.phone,
          Message: this.state.message
         }
         itemsRef.push(item);
         this.setState({
           name: '',
           email: '',
           phone: '',
           message: ''
         })
    
    }
 
  }

  render() {

  

    return (
        <form onSubmit={this.handleSubmit}>
          {/* I am just sending a basic error message */}
              {this.state.formError &&
                <p className="error">
                    Fill all the input fields please.
                </p>
              }
              <div>
                <label htmlFor="name">Name</label>
                <input type="text" name="name" placeholder="Your name here please" onChange={this.getName} />
              </div>
              <div>
                <label htmlFor="email">Email</label>
                <input type="email" name="email" placeholder="We will contact you after reviewing your message" onChange={this.getEmail} />
              </div>
              
              <div>
                <label htmlFor="phone">Phone</label>
                <input type="phone" name="phone" placeholder="We will contact you after reviewing your message" onChange={this.getPhone} />
              </div>
              <div>
                <label htmlFor="name">Message</label>
                <textarea onChange={this.getDescription} maxLength="450"></textarea>

              </div>
              <div>
                <p>We will answer as soon as possible</p>
                <input type="submit" name="submit" value="Send" onClick= {this.submitForm} />
              </div>
              
            </form>
    );
  }
}

export default Form;

Answer 1

在 firebase push() 中可以有一个回调函数作为第二个参数，您可以在您的情况下使用它来检查何时完成保存到 firebase 的过程重定向到感谢页面。

所以在提交表单并保存到 firebase 之后，您可以像这样重定向到另一个页面:

itemsRef.push(item, ()=>{
  window.location.href = "/thankyou.html"; // similar behavior as clicking on a link
});