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

标签： reactjstwitter-bootstrapreact-nativefrontend

Answer 1

在 timeMetric 框中检查您的代码。我猜你想className="form-control"改写timeMetric="form-control"