ReactJS - onClick調用一個淡入淡出的組件

-2

新的web dev我發現了一些不錯的純HTML/JQuery模板。ReactJS - onClick調用一個淡入淡出的組件

我必須做反應的應用程序，我想實現登錄本網站模式的模板。

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

我不知道有關計算策略要我做才能夠轉變這種反應。

我必須在按鈕上處理onClick並使模態出現。如何通過像使用JQuery一樣更改CSS來加載組件Modal？

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

來源

2017-03-22 Ragnar

應該很容易通過添加一個類你LoginModal組件... 例如傳遞道具（例如visible＆login state（register | login））給LoginModal，取決於它設置一個類並渲染註冊或登錄模態內部並執行一些CSS魔術 - >疊加+顯示模式 – MarcelD

它比cs更勝於js。這取決於你如何將模式添加到您的DOM。 – alireza

你可以看看這裏：https://www.creative-tim.com/product/login-and-register-modal 我試圖實現這一點，但他們正在使用JQuery來改變狀態。我不知道是什麼在擾亂我，但我無法弄清楚如何用React做到這一點。就像我說我對React很新。 – Ragnar

在React中，您不需要使用CSS來顯示和隱藏模式。您可以在JSX中使用內聯條件表達式。

首先，你需要建立一個RegisterModal ...

...然後

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

來源

2017-03-22 23:34:13 Rorschach120

ReactJS - onClick調用一個淡入淡出的組件

回答

相關問題