19
rated 0 times
[
20]
[
1]
/ answers: 1 / hits: 19408
/ 6 Years ago, thu, december 13, 2018, 12:00:00
I'm new to React and have written the following form which sends the data to Firebase, this part works but on submit I want to redirect to /thankyou.html which is outside of the react app.
Can anyone advise how I redirect after submit please?
My form is as follows:
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;
More From » reactjs
