我试图在我的应用程序中使用fabric react messageBar组件但我无法关闭(关闭)消息部分,即使我点击了messageBar组件中的关闭图标。
请查看以下代码以供参考。
import React from 'react'
import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib-commonjs/MessageBar'
class MyMessage extends React.Component{
log=(event)=>{
console.log('close on test');
}
render(){
return(
<div>
<MessageBar
componentRef={(messageBar)=>{this.errorMsgBar = messageBar}}
messageBarType={MessageBarType.error}
isMultiline={false}
onDismiss={(event)=> this.log(event)}
dismissButtonAriaLabel="Close"
>
Error lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.{' '}
</MessageBar>
</div>
)
}
}
export default MyMessage;
Office Fabric将作为默认关闭功能,还是需要关闭它?
如果我需要关闭它,请让我知道我们如何做到这一点?
提前致谢。
Nagaraju
你可以尝试这样的事情:
import React from 'react'
import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib-commonjs/MessageBar'
class MyMessage extends React.Component{
constructor(){
super();
this.state = {
showMessageBar: true
}
}
closeMessageBar = () => {
this.setState({showMessageBar: false})
}
render(){
return(
<div>
{this.state.showMessageBar && <MessageBar
componentRef={(messageBar)=>{this.errorMsgBar = messageBar}}
messageBarType={MessageBarType.error}
isMultiline={false}
onDismiss={()=> this.closeMessageBar()}
dismissButtonAriaLabel="Close"
>
Error lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.{' '}
</MessageBar>}
</div>
)
}
}
export default MyMessage;