Javascript ReactJS-onClick调用fadeIn的组件

我发现了一些很好的纯HTML/JQuery模板

我必须用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

import React，{Component}来自'React'；
从'react bootstrap/lib'导入{Grid，Row，Col，Button}
导入“./Login.css”
从“../LoginModal/LoginModal”导入LoginModal
类登录扩展组件{
openLoginModal（）{
log（'openLoginModal'）；
//showloginfo（）；
}
OpenRegisterModel（）{
log（'openRegisterModal'）；
//showRegisterPerform（）；
}
render（）{
返回(
登录
登记
)
}
}
导出默认登录名

在React中，不需要使用CSS来显示和隐藏模式。您可以将内联条件表达式与JSX一起使用

首先，您需要构建一个RegisterModel

…那么

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

import React，{Component}来自'React'；
从'react bootstrap/lib'导入{Grid，Row，Col，Button}
导入“./Login.css”
从“../LoginModal/LoginModal”导入LoginModal
从“../RegisterModel/RegisterModel”导入RegisterModel；
类登录扩展组件{
构造函数（）{
超级（）；
//创建状态属性以记录每个模式的打开/关闭
此.state={
罗吉诺本：错，
注册表打开：false
};
}
//切换你的状态
openLoginModal（）{
this.setState（{loginOpen:true，registerOpen:false}）；
}
OpenRegisterModel（）{
this.setState（{loginOpen:false，registerOpen:true}）；
}
render（）{
//如果为true，`{true&&}`将呈现div
返回(
登录
登记
{this.state.loginOpen&&
}
{this.state.registerOpen&&
}
)
}
}

将类添加到LoginModel组件中应该相当容易。。。例如，将道具（例如可见和登录状态（register | login））传递给LoginModal，具体取决于它设置一个类，并在modal内呈现register或login&做一些css魔术->覆盖+显示modalIt是css而不是js。这取决于如何将模式添加到DOM中。我不知道是什么困扰着我，但我不知道如何用React来做。就像我说的，我是个新手。