我们如何关闭office react fabric组件的错误消息栏？

Question

我正在尝试在我的应用程序中使用 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

Answer 1

您可以尝试这样的操作：

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;

Answer 2

//this works for me    
//html content in render  
      {  
                              this.state.showMessageBar  
                                ?  
                                <div className="form-group">  
                                  <Stack >  
                                    <MessageBar messageBarType={this.state.messageType} 
                      onDismiss={()=> this.closeMessageBar()}
                      dismissButtonAriaLabel="Close">{this.state.message}</MessageBar>  
                                  </Stack>  
                                </div>  
                                :  
                                null  
                              }
        
        
        //close message bar
        
         @autobind
          private closeMessageBar(){
            this.setState({showMessageBar: false})    
         }
        
        //set message bar value
         @autobind
          private updatemessagebar(){
        this.setState({ 
                message: "Item: created successfully. ",  
                showMessageBar: true,  
                messageType: MessageBarType.success  
              }); 
        }

我们如何关闭office react fabric组件的错误消息栏？

How we can close the error messagebar of office react fabric component?

reactjs

office-ui-fabric

office-fabric