Question

我是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 个答案: