リアクションアラートコンポーネント閉じるボタン自己クローズ

Question

私は、ブートストラップクラスを使用するアラートリアクションコンポーネントを持っています。私はそれで閉じるボタンをクリックしたときに私は自己非表示にするアラートを取得するにはどうすればよい...

import React, { Component } from 'react'; 

class Alert extends Component { 
    render() { 
    return (
     <div> 
     <div className="alert alert-warning alert-dismissible" role="alert"> 
      <button type="button" className="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
      {this.props.text} 
     </div> 
     </div> 
    ); 
    } 
} 

export default Alert; 

それが正常に動作しますが、私の質問は：ここ

は、コンポーネントのコードですか？

Answer 1

あなたは状態で内部的にそれを行うことができます。

import React, { Component } from 'react'; 

class Alert extends Component { 

    constructor(props, context) { 
    super(props, context); 
    this.state = { 
     isActive: true, 
    } 
    } 

    hideAlert() { 
    this.setState({ 
     isActive: false, 
    }); 
    } 

    render() { 
    return (
     <div> 
     {this.state.isActive && <div className="alert alert-warning alert-dismissible" role="alert"> 
      <button type="button" className="close" data-dismiss="alert" aria-label="Close" onClick={() => this.hideAlert()}><span aria-hidden="true">&times;</span></button> 
      {this.props.text} 
     </div>} 
     </div> 
    ); 
    } 
} 
export default Alert;