React-Bootstrap警报不显示

如何解决React-Bootstrap警报不显示

我正在尝试使用react-bootstrap警报显示通知，当我单击按钮时，显示加载指示器的按钮应显示警报，但警报未显示。我一直在Google上搜索，但没有找到任何东西。在这里，我附上代码

view.js

export default class Message extends React.Component {
  constructor(props){
    super(props);
      this.state = {
        isLoggedIn: SystemStore.isLoggedIn(),profile: ProfileStore.getProfile(),fullName: SystemStore.systemUser().fullName,site: '',email: '',phone: '',subject: '',description: '',type: '',submitting: false
    };

    this.clearForm = this.clearForm.bind(this);
    this.handleProfileChange = this.handleProfileChange.bind(this);
    this.handleSubjectChange = this.handleSubjectChange.bind(this);
    this.handleMessageChange = this.handleMessageChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleSubmitComplete = this.handleSubmitComplete.bind(this);
    this.handleSubmitError = this.handleSubmitError.bind(this);
  }

  componentDidMount(){
    ProfileStore.addProfileChangeListener(this.handleProfileChange);
      if(!this.state.profile){
        ProfileActions.reload()
      }
    MessageStore.addSubmitMessageChangeListener(this.handleSubmitComplete);
    MessageStore.addSubmitMessageFailChangeListener(this.handleSubmitError);//unresolved
  }    

  componentWillUnmount(){
    ProfileStore.removeProfileChangeListener(this.handleProfileChange);
    MessageStore.removeSubmitMessageChangeListener(this.handleSubmitComplete);
    MessageStore.removeSubmitMessageFailChangeListener(this.handleSubmitError);
  }

  render(){
    return(
      <Layout>
        <div className='hs-dashboard row'>
          <div className='col-md-12'>
            <div className='col-xs-12 col-sm-6 col-md-5'>
              <div className='col-xs-12 hs-message-form'>
                <div className='row hs-message-form-head'>
                  <div className='hs-message-form-logo-container'>
                    <img className='col hs-message-form-logo' src='../../images/gii-logo-black.png'/>
                      <text className='hs-message-form-logo-label'>{T.translate('gii')}</text>
                  </div>
                  <div className='hs-message-form-label'>
                    { T.translate('message.title') }
                  </div>
                  <div className='hs-message-form-label-1'>
                    { T.translate('message.subtitle') }
                  </div>
                </div>
                <div className='row hs-message-form-body'>
                  <form className='hs-message-form-body-content'>
                    <label>
                      { T.translate('message.type') }
                    </label>
                    <select
                      id="subject"
                      value={ this.state.subject }
                      onChange={ this.handleSubjectChange }
                      className="form-control"
                      required="true"
                    >
                      <option value="">{ T.translate('placeholder.selectSubject') }</option>
                      <option value="PRAYER">{ T.translate('message.pray') }</option>
                      <option value="ADDRESS">{ T.translate('message.address') }</option>
                      <option value="VISIT">{ T.translate('message.visit') }</option>
                    </select>
                    <label>
                      {T.translate('message.message')}
                    </label>
                    <textarea
                      type="text"
                      id="description"
                      className="form-control"
                      width=''
                      placeholder={ T.translate('placeholder.message') }
                      onChange={ this.handleMessageChange }
                      value={ this.state.description }
                      required
                    />
                    <LaddaButton
                      loading={ this.state.submitting }
                      onClick={ this.handleSubmit }
                      data-spinner-size={ 30 }
                      data-style={ SLIDE_RIGHT }
                    >
                      { T.translate('action.send') }
                    </LaddaButton> 
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </Layout>
    )
  }

  clearForm(){
    this.setState({ subject: '',description: '' });
      return(
        <Alert show={true} dismissable={true}>{T.translate('msg.mailSent')}</Alert>
      )
  }

  handleProfileChange(){
    this.setState({
      site: ProfileStore.getProfile().primarySite.name,email: ProfileStore.getProfile().emailAddresses[0].email,phone: ProfileStore.getProfile().contactNumbers[0].countryCode + ProfileStore.getProfile().contactNumbers[0].number
    });
  }
    
  handleSubjectChange(evt){
    this.setState({ subject: evt.target.value },() => {
      if(this.state.subject === 'PRAYER') {
        this.setState({ type: 'REQUEST' });
      } else if(this.state.subject === 'ADDRESS') {
        this.setState({ type: 'INFORMATION' });
      } else if(this.state.subject === 'VISIT'){
        this.setState({ type: 'REQUEST' });
      }
    });
  }
    
  handleMessageChange(evt){
    this.setState({ description: evt.target.value });
  }

  handleSubmit(evt) {
    evt.preventDefault();
        
    if(this.state.subject === ''){
      alert('Error:' + T.translate('msg.subjectRequired'));
    } else if(this.state.description === ''){
      alert('Error:' + T.translate('msg.mailDescriptionRequired'));
    } else {
      alert(T.translate('msg.mailSending'));
    }

    this.handleProfileChange();
    this.handleSubjectChange(evt);
    this.handleMessageChange(evt);
    var messageInfo = {
      fullName: this.state.fullName,site: this.state.site,email: this.state.email,phone: this.state.phone,subject: this.state.subject,description: this.state.description,type: this.state.type
    };

    this.setState({ submitting: true },() => {
      MessageActions.sendMessage(messageInfo);
    });
  }

  handleSubmitComplete(){
    this.setState({
      submitting: false
    });
    this.clearForm();
  }

  handleSubmitError(){
    this.setState({
      submitting: false
    });
    alert(T.translate("msg.mailSentFailed"))
  }
}

有什么建议吗？感谢您的帮助