ボタンを押した後でポップアップを非表示にします。 React Js

Question

好きなように、私はいくつかのポップアップブロックまたはモーダルウィンドウを持っています。そしてボタンを押した後、それが閉じられることを望みます。 checkbooxがtrueになったらボタンが表示されます。私を助けてください。私はCSSに何かを追加しなければならないかもしれません、またはJSコードが間違っています。 コードは次のとおりです。で

class ModalWindow extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { 
 
     open: false, 
 
     checked: false 
 
    }; 
 
    this.handleChange = this.handleChange.bind(this); 
 
    } 
 

 
    handleChange() { 
 
    this.setState({ 
 
     checked: !this.state.checked 
 
    }) 
 
    } 
 

 

 
    hide() { 
 
    this.setState({ 
 
     open: false, 
 
    }); 
 
    } 
 

 
    show() { 
 
    this.setState({ 
 
     open: true, 
 
    }); 
 

 

 
    } 
 

 
    componentDidMount() { 
 
    this.show(); 
 
    } 
 

 

 

 
    render() { 
 
    const buttonContent = this.state.checked ? <div className={s.showButton}> 
 
     <button onClick={() => this.hide()} className={s.closeBtn}>Confirm yes yes</button> 
 
    </div> : null; 
 
    
 
    return (
 
     <div className={this.state.open ? 'show':'hide'}> 
 
     <div className={s.modal}> 
 

 
      <h2 className={s.modalText}>Some text in block</h2> 
 
      <label>I want to confirm</label> 
 
      <input type="checkbox" checked={this.state.checked} onChange={this.handleChange}/> 
 
      {buttonContent} 
 
     </div> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
export default withStyles(s)(ModalWindow);

.modal { 
 
    background:#fff; 
 
    width: 350px; 
 
    height: 200px; 
 
    margin: 5% auto; 
 
    padding: 5px 20px; 
 
    position: relative; 
 
    border: 2px solid #0000ee; 
 

 
} 
 

 
.hide { 
 
display:none 
 
} 
 

 
.modalText { 
 
    font-size: 18px; 
 
    color: #000000; 
 
} 
 

 
label { 
 
    margin:0 15px 0 0; 
 
} 
 

 
.closeBtn { 
 
    display: block; 
 
    position: absolute; 
 
    bottom: 5px; 
 
    width: 150px; 
 
    height:50px; 
 
    margin:0 0 0 100px; 
 
    outline: none; 
 
    color: #555; 
 
    border: none; 
 
    background: #000000; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.min.js"></script> 
 
<div id="container"> 
 
    <!-- This element's contents will be replaced with your component. --> 
 
</div>

Answer 1

あなたは要素の隠ぺいや上映を行うための別の方法を持って反応します。あなたはただそれをレンダリングするか、レンダリングしません。 モーダルダイアログを表示または非表示にするためにモーダルダイアログ内の状態を設定するのではなく、このダイアログがレンダリングされるかどうかを決定するプロパティが外部にあります。あなたのリアクションアプリは次のようになります：

class ComponentWithModalDialog extends React.Component { 
    render() { 
    const {showModal} = this.props; 


    if(showModal) { 
     return <ModalWindow /> 
    } 
    else { 
     return <div> 
     other content 
     </div> 
    } 
    } 
}