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
});

Answer 2

submitForm = (e) =>{ 
  this.props.history.push('/thankyou');
}

Answer 3

在完成所有操作后，在您的SubmitForm函数中尝试此操作。希望对您有帮助。

document.location = "/thankyou.html"（如果文件位于根目录中，document.location = "thankyou.html"（如果文件位于相对目录中）。

Answer 4

使用react-router-dom npm软件包。

import {withRouter, BrowserRouter } from 'react-router-dom';

用BrowserRouter包装App.js组件

<BrowserRouter><App /></BrowserRouter >

现在，使用具有提交处理程序功能的withRouter包装您的组件。

使用路由器（您的组件名称）导出默认值；

submitForm = (e) =>{ 
  this.props.history.push('/url');
}

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

4 个答案: