为什么在get方法中我在react中发布请求时得到空字段？答案

【问题标题】：why In get method i am getting empty fields when posting request in react?为什么在get方法中我在react中发布请求时得到空字段？
【发布时间】：2017-05-30 05:32:44
【问题描述】：

我正在从响应 API、connectionname、sid 等字段发布数据，当我检查获取请求时，我没有在显示为空字段的字段中获取数据。任何人都可以帮助我这几天我对此感到震惊。

render() {

     return (
     <div className="body_scroll"> 
     <section>
      <div className="container-fluid">
        <div className="row">
          <div className="col-md-6">
            <h3 className="row_title">Add New Data Connection</h3>
          </div>
          <div className="col-md-4 col-md-offset-2 ">
            <div className="top_row_right text-right">
            <form onSubmit={this.submit}>
              <button className="btn btn-primary" type= "submit">Save</button>
              <button className="btn btn-primary"> Close</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section className="content_block">
      <div className="container-fluid">
        <div className="row">
          <div className="col-md-12">
            <div className="connection_tab_block">
              <ul className="nav nav-tabs">
                <li className="active"><a href="#con_setting" data-toggle="tab"> Connection Setting</a></li>

              </ul>
              <div id="connectionTabContent" className="tab-content">
                <div className="tab-pane fade active in" id="con_setting">
                  <div className="row clearfix">


                   <form onSubmit={this.submit} >

                    <div className="col-md-6">
                      <div className="form-group clearfix is-empty">
                        <label htmlFor className="col-md-4 control-label">Data Connection Name</label>                        
                        <div className="col-md-8">


                          <input className="form-control box_ip" id placeholder="Data Connection Name" type="text"   valChange={this.dataConnectionNameChange} val={this.state.dataConnectionName}/>
                        </div>
                      </div>
                    </div>
                    <div className="col-md-6">
                      <div className="form-group clearfix is-empty">
                        <label htmlFor className="col-md-4 control-label">Description</label>                        
                        <div className="col-md-8">
                          <input className="form-control box_ip" id placeholder="Description" type="text" 

                           valChange={this.descriptionChange} val={this.state.description} />
                    </div>
                      </div>
                    </div>
                    <div className="col-md-6">
                      <div className="form-group clearfix">
                        <label htmlFor=" " className="col-md-4 control-label">Type</label>                        
                        <div className="col-md-8">
                          <select className="form-control box_ip" ><option> Oracle </option></select>
                        </div>
                      </div>
                    </div>
                    <div className="col-md-6">
                      <div className="form-group clearfix">
                        <label htmlFor="inputEmail" className="col-md-4 control-label">Connection Method</label>                        
                        <div className="col-md-8">
                          <select className="form-control box_ip">
                          <option> JDBC </option>
                          <option> ODBC </option>

                          </select>
                        </div>
                      </div>
                    </div>
                    <div className="col-md-6">
                      <div className="form-group clearfix is-empty">
                        <label htmlFor=" " className="col-md-4 control-label">Database Host</label>                        
                        <div className="col-md-8">
                          <input className="form-control box_ip" id=" " placeholder="Database Host" type="text" 

                          valChange={this.databaseHostChange} val={this.state.databaseHost} />
                        </div>
                      </div>
                    </div>
                    <div className="col-md-6">
                      <div className="form-group clearfix is-empty">
                        <label htmlFor=" " className="col-md-4 control-label">Database Port</label>                        
                        <div className="col-md-8">
                          <input className="form-control box_ip" id=" " placeholder="Database Port" type="text" 

                          valChange={this.databasePortChange} val={this.state.databasePort} />
                        </div>
                      </div>
                    </div>
                    <div className="col-md-6">
                      <div className="form-group clearfix is-empty">
                        <label htmlFor=" " className="col-md-4 control-label">SID</label>                        
                        <div className="col-md-8">
                          <input className="form-control box_ip" id=" " placeholder="SID" type="text" 

                           valChange={this.dataConnectionSidChange} val={this.state.dataConnectionSid} />
                        </div>
                      </div>
                    </div>
                    <div className="col-md-6">
                      <div className="form-group clearfix is-empty">
                        <label htmlFor=" " className="col-md-4 control-label"> Driver</label>                        
                        <div className="col-md-8">
                          <input className="form-control box_ip" id=" " placeholder=" Driver" type="text" 


                          valChange={this.jdbcDriverChange} val={this.state.jdbcDriver}  />
                        </div>
                      </div>
                    </div>
                    <div className="col-md-6">
                      <div className="form-group clearfix is-empty">
                        <label htmlFor=" " className="col-md-4 control-label">Username</label>                        
                        <div className="col-md-8">
                          <input className="form-control box_ip" id=" " placeholder="Username" type="text" 


                          valChange={this.dataConnectionUsernameChange} val={this.state.dataConnectionUsername} />
                        </div>
                      </div>
                    </div>
                    <div className="col-md-6">
                      <div className="form-group clearfix is-empty">
                        <label htmlFor=" " className="col-md-4 control-label">Password</label>                        
                        <div className="col-md-8">
                          <input className="form-control box_ip" id=" " placeholder="Password" type="text" 


                          valChange={this.dataConnectionPasswordChange} val={this.state.dataConnectionPassword} />
                        </div>
                      </div>
                    </div>

                    </form>                            
                  </div>  
                </div>

              </div> 
            </div>           
          </div>
        </div>        
      </div>   
    </section>


  </div>


    );
}

【问题讨论】：

componentDidMount() { $.ajax({ type: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, url : 'localhost:8080/UIServices/rest/dataService/…', data: JSON.stringify({ dataConnectionName: this.state.dataConnectionName, dataConnectionType: this.state.dataConnectionType, databaseHost: this.state.databaseHost }) }
handleSubmit(e){ var self e.preventDefault(); self = 这个 console.log(this.state); var data = { dataConnectionName: this.state.dataConnectionName, dataConnectionType: this.state.dataConnectionType } }
您可以编辑您的问题。而不是在 cmets 中添加代码。
添加代码时显示错误
如果你理解的话，你能在 2 天后给出解决方案

标签： javascript jquery ajax api reactjs

【解决方案1】：

在提交时，您正在调用 this.submit 函数，但在您的代码中您声明为 handleSubmit()。将提交函数的名称从handleSubmit更改为提交

handleSubmit(e){
    var self e.preventDefault();
    self = this console.log(this.state); 
    var data = { dataConnectionName:this.state.dataConnectionName, dataConnectionType: this.state.dataConnectionType };
} 
// use this function 

submit(e){
    var self e.preventDefault();
    self = this console.log(this.state); 
    var data = { dataConnectionName:this.state.dataConnectionName, dataConnectionType: this.state.dataConnectionType };

}

【讨论】：