如何解决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"))
}
}
有什么建议吗?感谢您的帮助
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。