我有自动提交三次的联系表格。表单提交调用API在不同的端口。
首先将表单提交到网址 - http://localhost:3002/user/contact_us，但没有帖子数据
第二个表单提交到URL - http://localhost:3000/contact_us是我当前的页面网址。
第三次提交到url - http://localhost:3002/user/contact_us并提供所有数据并获得相应的回复
但不知道为什么提交表格三次。下面是我的contactus.js组件文件，请让我知道我做错了什么。
=====================================
import React from 'react';
import DefaultLayout from '../Layout/DefaultLayout';
//import $ from 'jquery';
import { connect } from 'react-redux';
import { contactRequest } from '../actions/signupActions';
import { bindActionCreators } from 'redux';
import validator from 'validator';
class Contactus extends React.Component {
constructor(props){
super(props);
document.title = "Contact Us";
this.login_errorMapping = {"100": "Your message has been submitted.",
"102": "Name cannot be empty.",
"104": "Email cannot be empty.",
"103": "Hotel cannot be empty.",
"105": "Incorrect email format.",
"106": "Phone cannot be empty."}
this.state = {name: '',email:'', phone:'',hotel:'',message :'',nameError: '',emailError:'', phoneError:'',hotelError:'',messageError:''};
this.handleInputChange = this.handleInputChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleInputChange(event) {
this.setState({ [event.target.name]: event.target.value});
}
handleSubmit(event) {
event.preventDefault();
//====Frontend validation=================
let error = false;
this.setState({nameError : ""});
this.setState({emailError : ""});
this.setState({phoneError : ""});
this.setState({hotelError : ""});
this.setState({messageError : ""});
if(typeof this.state.name === undefined || this.state.name === null || this.state.name === ''){
this.setState({nameError : "Name can not be empty"})
error = true;
}
if(typeof this.state.phone === undefined || this.state.phone === null || this.state.phone === ''){
this.setState({phoneError : "Phone no. can not be empty"})
error = true;
}
if(typeof this.state.email === undefined || this.state.email === null || this.state.email === ''){
this.setState({emailError : "Email can not be empty"})
error = true;
}else if(!validator.isEmail(this.state.email)){
this.setState({emailError : "Incorrect email address"});
error = true;
}
if(typeof this.state.hotel === undefined || this.state.hotel === null || this.state.hotel === ''){
this.setState({hotelError : "Phone no. can not be empty"})
error = true;
}
if(typeof this.state.message === undefined || this.state.message === null || this.state.message === ''){
this.setState({messageError : "Message no. can not be empty"})
error = true;
}
if(error === true){
return;
}else{
delete this.state.nameError;
delete this.state.phoneError;
delete this.state.emailError;
delete this.state.hotelError;
delete this.state.messageError;
}
//======End frontend validation=========
this.props.contactRequest(this.state);
}
render(){
const style_1 = {height: '240px'};
const style_2 = {marginRight: '15px'};
const style_3 = {width: 'auto'};
return(
<DefaultLayout>
<section id="content">
<div className="content-wrap">
<div className="container clearfix">
<div className="col-md-6 bottommargin">
<section id="google-map" className="gmap" style={style_1} ></section>
</div>
<div className="col-md-6">
<a href="#" data-toggle="modal" data-target="#contactFormModal" className="button button-3d nomargin btn-block button-xlarge hidden-xs center">Click here to Send an Email</a>
<a href="#" data-toggle="modal" data-target="#contactFormModal" className="button button-3d nomargin btn-block visible-xs center">Send an Email</a>
<div className="modal fade" id="contactFormModal" tabIndex="-1" role="dialog" aria-labelledby="contactFormModalLabel" aria-hidden="true">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 className="modal-title" id="contactFormModalLabel">Send Us an Email</h4>
</div>
<div className="modal-body">
<div className="contact-widget">
<div className="contact-form-result">
{this.props.resultMessage && this.props.resultMessage.status.map((msg, idx) => {
if(msg === 100) { return <span key={idx} id="succ_msg">{this.errorMapping[msg]}</span>
} else {
return <span key={idx} id="err_msg">{this.errorMapping[msg]}</span>
}
})
}
</div>
<form className="nobottommargin" id="r_contactform" name="r_contactform" method="post" onSubmit={this.handleSubmit}>
<div className="form-process"></div>
<div className={"col_half " + (this.state.nameError ? 'has-error': '') }>
<label htmlFor="template-contactform-name">Name <small>*</small></label>
<input type="text" id="template-contactform-name" name="name" value={this.state.name} className="sm-form-control required" onChange={this.handleInputChange} />
<span className={this.state.nameError ? 'help-block error': '' }>{ this.state.nameError ? this.state.nameError: '' }</span>
</div>
<div className={"col_half col_last " + (this.state.emailError ? 'has-error': '') }>
<label htmlFor="template-contactform-email">Email <small>*</small></label>
<input type="email" id="template-contactform-email" name="email" value={this.state.email} className="required email sm-form-control" onChange={this.handleInputChange} />
<span className={this.state.emailError ? 'help-block error': '' }>{ this.state.emailError ? this.state.emailError: '' }</span>
</div>
<div className="clear"></div>
<div className={"col_half " + (this.state.phoneError ? 'has-error': '') }>
<label htmlFor="template-contactform-phone">Phone</label>
<input type="text" id="template-contactform-phone" name="phone" value={this.state.phone} className="sm-form-control" onChange={this.handleInputChange} />
<span className={this.state.phoneError ? 'help-block error': '' }>{ this.state.phoneError ? this.state.phoneError: '' }</span>
</div>
<div className={"col_half col_last " + (this.state.hotelError ? 'has-error': '') }>
<label htmlFor="template-contactform-service">Hotel</label>
<select value={this.state.hotel} id="hotel" name="hotel" className="sm-form-control" onChange={this.handleInputChange} >
<option value="">-- Select One --</option>
<option value="Wordpress">Wordpress</option>
<option value="Graphic Design">Graphic Design</option>
</select>
<span className={this.state.hotelError ? 'help-block error': '' }>{ this.state.hotelError ? this.state.hotelError: '' }</span>
</div>
<div className="clear"></div>
<div className={"col_half " + (this.state.messageError ? 'has-error': '') }>
<label htmlFor="template-contactform-message">Message <small>*</small></label>
<textarea className="required sm-form-control" id="template-contactform-message" name="message" value={this.state.message} rows="6" cols="30" onChange={this.handleInputChange}></textarea>
<span className={this.state.messageError ? 'help-block error': '' }>{ this.state.messageError ? this.state.messageError: '' }</span>
</div>
<div className="col_full">
<button className="button button-3d nomargin" type="submit" id="contactform-submit" name="contactform-submit">Send Message</button>
</div>
</form>
</div>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</DefaultLayout>
);
}
}
function mapStateToProps(state){
console.log("View data :"+JSON.stringify(state.data));
return {
resultMessage: state.data
}
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({contactRequest: contactRequest}, dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps) (Contactus);