ReactJS - onClick zum Aufruf einer Komponente, die fadeIn

Question

New Web Dev Ich fand einige nette reine HTML/JQuery-Vorlage.

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

Ich habe mit React eine App zu tun, und ich möchte modal Vorlage implementieren die auf dieser Website einzuloggen.

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

Ich bin mir nicht sicher über die approch muss ich machen, um dies zu konvertieren zu reagieren.

Ich muss die onClick auf den Tasten behandeln und das Modal erscheinen. Wie kann ich die Komponente Modal laden, indem Sie die CSS wie bei JQuery ändern?

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

In Reagieren müssen Sie zum Anzeigen und Ausblenden des Modals kein CSS verwenden. Sie können nur einen bedingten Inline-Ausdruck mit JSX verwenden.

müssen Sie zuerst eine RegisterModal bauen ...

... Dann

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> 
    ) 
    } 
}