表单验证后如何在响应中重定向页面

时间:2019-04-20 13:31:15

标签: javascript reactjs express

我是JavasScript的新手,所以我可能不是最好的方法,希望有人可以纠正我!我有一种形式,可以通过ajax调用发送数据来表达。

return HttpResponse(response,content_type='text/json')

<Form  name="FlightForm" id="FlightForm"  action="/search" onSubmit={this.onSubmit}  >



      <div >
 <label>FROM</label>
 <input required  type='text' name='originOne' id="originOne"  onChange={this.setState.originOne}  className="form-control" placeholder="Departing from"/>
        </div>


<div>
  Departure Date 
 <DatePicker className="form-control" required minDate={new Date()} name='date' selected={this.state.startDate} onChange={this.handleChange}/>

</div>



    <p><button type="submit" name="search" id="search" value="true" onSubmit={this.loading()} className="w3-button w3-dark-grey">Search for destinations</button></p>


</Form>

此刻,我有一个ajax调用来将数据提交到index.html页面中引用的服务器。


export class Home extends React.Component {

  constructor(props) {
    super(props);

   this.state = { originOne: '', originTwo: '', redirectToResult: false, startDate: new Date(), route:'', loader:false};


      this.onSubmit= this.onSubmit.bind(this);
      this.handleChange= this.handleChange.bind(this);
      this.setMulti=this.setMulti.bind(this);
      this.loading=this.loading.bind(this);

    }


onChange = (e) => {
    this.setState({
       originOne: e.target.value, originTwo: e.target.value, 
       route:e.target.value});
    };


 setMulti  = event => {
         this.setState(
             {route: event.target.value});
     };

 onSubmit = (e) => {

     e.preventDefault();
     const { originOne, originTwo , route} = this.state;
    this.setState({ loading : true});
     {this.loading()}
};

 handleChange(date){
     this.setState({
         startDate:date
     });
 }

我已经将其结构化为在提交后使用加载微调器重定向到搜索页面,但这会覆盖用于表单验证的必填字段。

在表单验证后提交表单并重定向到下一页的最佳方法是什么?任何帮助将不胜感激,谢谢!

0 个答案:

没有答案