为什么我不能在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"