ReactJS - onClick 调用一个淡入淡出的组件答案

【问题标题】：ReactJS - onClick to call a component that fadeInReactJS - onClick 调用一个淡入淡出的组件
【发布时间】：2017-08-14 19:46:48
【问题描述】：

新的网络开发，我发现了一些不错的纯 HTML/JQuery 模板。

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

我必须用 React 做一个应用程序，我想在这个网站上实现登录模式模板。

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

我不确定我必须采取什么方法才能将其转换为 React。

我必须处理按钮上的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

【问题讨论】：

通过向 LoginModal 组件添加一个类应该相当容易......例如将道具（例如可见和登录状态（注册|登录））传递给 LoginModal，取决于它设置一个类并在模式中渲染注册或登录并做一些 css 魔术 -> 覆盖 + 显示模式
是css多于js。这取决于您如何将模态添加到您的 DOM。
你可以看这里：creative-tim.com/product/login-and-register-modal 我尝试实现这个，但他们使用 JQuery 来改变状态。我不知道是什么在困扰我，但我无法弄清楚如何使用 React 来做到这一点。就像我说我对 React 很陌生。

标签： javascript jquery css twitter-bootstrap reactjs

【解决方案1】：

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

【讨论】：