Reux Redux 알림 메시지

Question

Reux Redux를 처음 사용하여 메시지를 표시하는 알림 구성 요소가 있습니다. 이 닫기 아이콘을 클릭하면이 메시지를 숨기고 싶습니다. . 여기 내 코드가있다. 제발 제안 해주세요.

export default class NotificationMessage extends Component { 
    constructor(props) { 
     super(props); 
     this._onClick = this._onClick.bind(this); 
    }; 
    _onClick() { 
     console.log("close this button"); 

    }; 
    render() { 
     var message; 
     //let classerr = this.props.messageType ? 'notificationTheme.success' : 'notificationTheme.success'; 

     //let cssClasses = `${classerr}`; 
     if(this.props.messageType=='success') 
     { 
      message = <div className={notificationTheme.success}> 
       <span className={notificationTheme.message}>{this.props.content}</span> 
       <i className={`${iconTheme['ic-remove']} ${notificationTheme.remove} ic-remove `} onClick={() => this._onClick()}/> 

      </div> 
     } 
     else 
     { 
      message = <div className={notificationTheme.error}> 
       <span className={notificationTheme.message}>{this.props.content}</span> 
       <i className={`${iconTheme['ic-remove']} ${notificationTheme.remove} ic-remove `} onClick={() => this._onClick()}/> 

      </div> 
     } 
     return (
      message 
     ) 
    } 
} 

NotificationMessage.propTypes = { 
    config: PropTypes.shape({ 
     content: PropTypes.string.isRequired 
    }) 
}; 

Answer 1

외부 구성 요소에서 onClick 함수를 전달하십시오. 이 상태의 알림 표시를 근거로하는 경우

showMessage() { 
    const { displayNotification } = this.state; 
    this.setState({ 
     displayNotification: !displayNotification 
    }); 
} 

후 바로 닫기 아이콘의 클릭에 상태를 변경 알림에 소품으로 showMessage 기능을 통해 전달합니다. 그런 다음 닫기 아이콘을 클릭하면 displayNotification이 false로 변경되고 알림이 숨겨집니다.

Answer 2

당신은 버튼 클릭 이벤트에 같은

constructor(props) { 
     super(props); 
     this.state = {fDisplayNotification : true} 
     this._onClick = this._onClick.bind(this); 
    }; 

로 처음에 사실로 상태 fDisplayNotification 반응이 트리거해야 거짓

_onClick() { 
     this.setState({fDisplayNotification :false}); 
    } 

이에 상태를 설정할 수 있습니다 상태와 구성 요소의 재 렌더링 변경되었습니다.

this.state.fDisplayNotification이 false 인 경우 렌더링 메소드를 변경하여 비어있게 만듭니다.