Bootstrap 4 beta无法正常反应

Question

我尝试使用bootstrap 4来显示表单输入的错误。 一切都在工作但是一旦我点击了＃34; SignUp＆＃34;带有空表单的按钮，不显示红色错误。所以＆＃34;＆＃34;＆＃34;有危险＆＃34;＆＃34; Bootstrap 4的课程不起作用。我想知道是否有任何其他方式来使用Bootstap 4中的错误类。

import React from 'react';
import PropTypes from 'prop-types';
import map from 'lodash/map';
import classnames from 'classnames';

class SignUpForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      firstname: '',
      lastname: '',
      username: '',
      password: '',
      email: '',
      errors: {},
      isLoading: false
    }
    this.onChange = this.onChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);

  }
  onChange(e) {
    this.setState({
      [e.target.name]: e.target.value
    });
  }

  onSubmit(e) {

    e.preventDefault();
    this.setState({errors: {}, isLoading: true});
    this.props.userSignUpRequest(this.state).then(() => {}, ({data}) => this.setState({errors: data, isLoading: false}));

  }
  render() {
    const {errors} = this.state;
    return (
      <form onSubmit={this.onSubmit}>
        <div className={classnames('form-group', {'has-danger': errors.firstname})}>
          <label className="form-control-label">
            First Name
          </label>
          <input value={this.state.firstname} onChange={this.onChange} type="text" name="firstname" className="form-control form-control-danger" id="inputDanger1"/> {errors.firstname && <span className="help-block">{errors.firstname}</span>}
        </div>
        <div className="form-group has-danger">
          <label className="form-control-label">
            Last Name
          </label>
          <input value={this.state.lastname} onChange={this.onChange} type="text" name="lastname" className="form-control form-control-danger"/> {errors.lastname && <span className="help-block">{errors.lastname}</span>}
        </div>
        <div className="form-group">
          <label className="control-label">
            Username
          </label>
          <input value={this.state.username} onChange={this.onChange} type="text" name="username" className="form-control"/> {errors.username && <span className="help-block">{errors.username}</span>}
        </div>
        <div className="form-group">
          <label className="control-label">
            Password
          </label>
          <input value={this.state.password} onChange={this.onChange} type="text" name="password" className="form-control"/> {errors.password && <span className="help-block">{errors.password}</span>}
        </div>
        <div className="form-group">
          <label className="control-label">
            Email
          </label>
          <input value={this.state.email} onChange={this.onChange} type="text" name="email" className="form-control"/> {errors.email && <span className="help-block">{errors.email}</span>}
        </div>
        <div className="text-left">
          <small>By clicking Submit, I agree that I have read and accepted the
            <a href="#"> Terms and conditions</a>
          </small>
        </div>
        <div className="form-group mt-1">
          <button disabled={this.state.isLoading} className="btn btn-primary btn-lg">Sign Up</button>
        </div>
      </form>
    );
  }
}

SignUpForm.propTypes = {
  userSignUpRequest: PropTypes.func.isRequired
}

export default SignUpForm;