Twitter bootstrap react中的引导表单在提交前显示验证消息

这是react中表单验证的代码，但在im点击提交按钮之前，所有字段都会显示错误消息，但我只想在im点击特定框时显示错误消息，然后应显示相应的错误消息，如果我甚至没有点击其中一个框，则应显示绿色或红色，请帮我解决这个问题

render() {
    const { hospital_data } = this.state;
    return (
      <div className="register">
        <div className="container">
          <div className="row">
            <div className="col-md-8 m-auto">
              <h1 className="display-4 text-center">Sign Up</h1>
              <p className="lead text-center">Create your account</p>
              <form className="container was-validated" onSubmit={this.onSubmit} noValidate >
                <div className="form-group">
                  <label className="form-control-label" htmlFor="inputSuccess1">Your Name:</label>
                  <div className="col-xs-5 selectContainer">
                    <input id="inputSuccess1" type="text" className="form-control form-control-lg" placeholder="Name" name="name" value={this.state.name} onChange={this.onChange} required minLength="5" />
                    <div className="invalid-feedback">Enter atleast 5 characters.</div>
                  </div>
                </div>
                <div className="form-group">
                  <label className="col-xs-3 control-label">Language</label>
                  <div className="col-xs-5 selectContainer">
                    <select required name="hospital_id" className="form-control" value={this.state.value} onChange={this.onChange}>
                      <option value="">select hospital</option>
                      {hospital_data.map((item) =>
                      <option key={item._id} value={item._id}>{item.name}</option>
                    )}
                    </select>
                    <div className="invalid-feedback">Choose any 1 hospital.</div>
                  </div>
                </div>
                <div ><label htmlFor="customRadioInline1">Choose Gender:</label></div>
                <div className="custom-control custom-radio custom-control-inline">
                  <input type="radio" id="customRadioInline1" name="gender" className="custom-control-input" value="male" onChange={this.onChange} required />
                  <label className="custom-control-label" htmlFor="customRadioInline1">Male</label>
                </div>
                <div className="custom-control custom-radio custom-control-inline">
                  <input type="radio" id="customRadioInline2" name="gender" className="custom-control-input" value="female" onChange={this.onChange} required />
                  <label className="custom-control-label" htmlFor="customRadioInline2">Female</label>
                </div>
                <div className="form-group">
                  <div><label htmlFor="designation">Enter Designation:</label></div>
                  <input type="text" className="form-control form-control-lg" placeholder="Designation" name="designation" value={this.state.designation} onChange={this.onChange} minLength="5" required />
                  <div className="invalid-feedback">Enter your designation.</div>
                </div>
                <div className="form-group">
                  <label htmlFor="email">Enter Your Mail ID:</label>
                  <input type="email" className="form-control form-control-lg" placeholder="Email Address" name="email" value={this.state.email} onChange={this.onChange} required />
                  <div className="invalid-feedback">Enter a valid Mail address</div>
                </div>
                <div className="form-group">
                  <label htmlFor="password">Enter Password:</label>
                  <input type="password" className="form-control form-control-lg" placeholder="Password" name="password" value={this.state.password} onChange={this.onChange} minLength="5" required />
                  <div className="invalid-feedback">Enter atleast 5 characters.</div>
                </div>
                <div className="form-group">
                  <label htmlFor="confirm_password">Confirm Password:</label>
                  <input type="password" className="form-control form-control-lg" placeholder="confirm Password" name="confirm_password" value={this.state.password2} onChange={this.onChange} required />
                  <div className="invalid-feedback">password should match.</div>
                </div>
                <input type="submit" className="btn btn-info btn-block mt-4" />
              </form>
            </div>
          </div>
        </div>
      </div>
    )

这是我加载页面时它的外观图片。

---

基本上，您需要将错误存储在您的状态中，然后仅在错误不为空时进行渲染

---

有一个简短的例子。

@Colin我把它清理了一点，检查一下。@Colin这行将做什么[${e.target.name}错误]：''这是一个计算属性。因此，如果e.target.name是例如description，那么它将是：descriptionError.Sure，如果您愿意的话。您可以用其他方法来完成，但是您的代码的方式会使它变得困难。我建议检查处理表单错误的语义UI方法。你真的不必这么做，因为你可以计算它们。