ReactJS - fClickInのコンポーネントを呼び出すためにクリックしてください

Question

新しいweb dev純粋なHTML/JQueryテンプレートが見つかりました。

https://www.creative-tim.com/

私が反応し、私はこのウェブサイト上のモーダルテンプレートをログインするために実装したいとアプリをしなければなりません。

https://www.creative-tim.com/product/login-and-register-modal

私は、これが反応するように変換することができるように確認する必要がありapprochについてはよく分かりません。

ボタン上でonClickを処理して、モーダルを表示させる必要があります。 コンポーネントをModalにロードするには、CSSをJQueryと同じように変更しますか？

import React, { Component } from 'react'; 
import { Grid, Row, Col, Button } from 'react-bootstrap/lib' 
import './Login.css' 

import LoginModal from '../LoginModal/LoginModal' 

class Login extends Component { 

    openLoginModal(){ 
    console.log('openLoginModal'); 
    // showLoginForm(); 
    } 

    openRegisterModal(){ 
    console.log('openRegisterModal'); 
    // showRegisterForm(); 
    } 

    render() { 
    return (
     <Grid> 
     <Row> 
      <Col sm={4}></Col> 
      <Col sm={4}> 
      <Button bsClass="btn big-login" data-toggle="modal" onClick={this.openLoginModal}>Log In</Button> 
      <Button bsClass="btn big-register" data-toggle="modal" onClick={this.openRegisterModal}>Register</Button> 
      </Col> 
      <Col sm={4}></Col> 
     </Row> 
     <LoginModal /> 
     </Grid> 
    ) 
    } 
} 

export default Login 

Answer 1

実際には、モーダルの表示と非表示にCSSを使用する必要はありません。 JSXでインライン条件式を使用することができます。

まずあなたが次に

import React, { Component } from 'react'; 
import { Grid, Row, Col, Button } from 'react-bootstrap/lib' 
import './Login.css' 

import LoginModal from '../LoginModal/LoginModal' 
import RegisterModal from '../RegisterModal/RegisterModal'; 

class Login extends Component { 
    constructor() { 
    super(); 
    // create state properties to record open/close for each modal 
    this.state = { 
     loginOpen: false, 
     registerOpen: false 
    }; 
    } 
    // toggle your state 
    openLoginModal(){ 
    this.setState({ loginOpen: true, registerOpen: false }); 
    } 

    openRegisterModal(){ 
    this.setState({ loginOpen: false, registerOpen: true }); 
    } 

    render() { 
    // `{ true && <div /> }` will render div if true 
    return (
     <Grid> 
     <Row> 
      <Col sm={4}></Col> 
      <Col sm={4}> 
      <Button bsClass="btn big-login" data-toggle="modal" onClick={this.openLoginModal}>Log In</Button> 
      <Button bsClass="btn big-register" data-toggle="modal" onClick={this.openRegisterModal}>Register</Button> 
      </Col> 
      <Col sm={4}></Col> 
     </Row> 
     { this.state.loginOpen && 
      <LoginModal /> 
     } 
     { this.state.registerOpen && 
      <RegisterModal /> 
     } 
     </Grid> 
    ) 
    } 
}