Как мы можем закрыть панель сообщений об ошибках в компоненте Office Office Fabric?

Question

Я пытаюсь использовать компонент 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;

Офисная структура по умолчанию закроет функциональность или мне нужно ее закрыть?

Если мне нужно закрыть его, пожалуйста, дайте мне знать, как мы можем это сделать?

спасибо заранее.

-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;