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

Question

当我签入get请求时，我将发布来自response、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>


    );
}

Answer 1

在提交时，您正在调用this.submit函数，但在您的代码中，您声明为handleSubmit()。将submit函数的名称从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 };

}

​