為什么我不能在4行網格的最后一個框中輸入

Question

因此，發生的問題是我無法在第四輸入框timeMetric框中寫入任何輸入，並且我無法理解為什么會發生這種情況。 還有一些文字，因為如果沒有足夠的文字，它不會讓我發布問題，謝謝您的建議和幫助。 對於您可能給出的每一個答案，我都非常感激，因為這可能有助於解決我遇到的這個問題。 謝謝！

  render(){
        const { data,srcNSG, dstNSG, L7Classification, timeMetric, submitted, loading, error} = this.state;
    return (
     <div>
        <div>
            <h4>Nokia Data Mining Project</h4>
        </div>
        <hr></hr>
          <form name="form" onSubmit={this.handleSubmit}>
                    <div className='form-group row'>

                        <div className="col-md-2">
                        <label htmlFor="srcNSG">SrcNSG</label>
                          <input type="text" className="form-control" name="srcNSG" value={srcNSG} onChange={this.handleChange} />
                          {submitted && !srcNSG &&
                            <div className="help-block">srcNSG is required</div>
                          }
                          </div>
                        <div className="col-md-4">
                        <label htmlFor="dstNSG">DstNSG</label>
                          <input type="text" className="form-control" name="dstNSG" value={dstNSG} onChange={this.handleChange} />
                          {submitted && !dstNSG &&
                            <div className="help-block">DstNSG is required</div>
                          }

                        </div>
                        <div className="col-md-4">
                        <label htmlFor="L7Classification">L7Classification</label>
                          <input type="text" className="form-control" name="L7Classification" value={L7Classification} onChange={this.handleChange} />
                          {submitted && !L7Classification &&
                            <div className="help-block">L7Classification is required</div>
                          }

                        </div>  
                        <div className="col-md-2">
                        <label htmlFor="Time Metric">timeMetric</label>
                          <input type="text" className="form-control" name="Time Metric" value={timeMetric} onChange={this.handleChange} />
                          {submitted && !timeMetric &&
                            <div className="help-block">timeMetric is required</div>
                          }
                        </div>
                    </div>
                    <div className="form-group row">
                    <div className="col-md-2">
                        <button className="btn btn-primary" disabled={loading}>Submit</button>
                        {loading &&
                            <img src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
                        }
                      </div>

                    </div>

                    {data?
                      <Plot
                        data={data}
                        layout={layout}
                        //onInitialized={(figure) => this.setState(figure)}
                        //onUpdate={(figure) => this.setState(figure)}
                        divId = "graphDiv"
                      />
                      :null
                    }
                     { error?
                       <Alert  message= {error.message} type = "danger"></Alert> 
                      :null
                    }
                </form>
          </div>  
    );

  }

將timeMetric更改為className。 仍然沒有收到輸入。 感謝您找到這個。

解決了：

                        <div className="col-md-2">
                        <label htmlFor="timeMetric">timeMetric</label>
                          <input type="text" className="form-control" name="timeMetric" value={timeMetric} onChange={this.handleChange} />
                          {submitted && !timeMetric &&
                            <div className="help-block">timeMetric is required</div>
                          }
                        </div>

Answer 1

在timeMetric框中檢查您的代碼。 我猜你想寫className="form-control"而不是timeMetric="form-control"