Reactjs React引导模式登录/注册表单

您好，我是React新手，目前正在尝试实现React引导模式。目前我有两个单独的登录和注册模式。但是在每个Id的模态体中，我希望有一个选项卡，可以在登录和注册模态内容之间切换。有更好的方法吗？我想用一个authmodel和两个用于登录/注册内容的组件。请告知

注册模式：

import React, { Component } from 'react'
import { Button, Modal, OverlayTrigger, Popover, Tooltip, Nav, NavItem, Row, Col, FormGroup, FieldGroup, Checkbox } from 'react-bootstrap'
import axios from 'axios';
import cookie from 'react-cookie';
import FacebookLogin from 'react-facebook-login';
import GoogleLogin from 'react-google-login';

const responseGoogle = (response) => {
  console.log(response);
  console.log(response.accessToken)
  axios.post('https://api.tech/sessions/google', {
    google_token: response.accessToken
  })
  .then(function (response) {
    var userInfo = {id: response.data.data.id, token: response.data.data.attributes['auth-token']}
    cookie.save('user', userInfo);
    console.log(response);
    SignupModal.setState({ showModal: false });
  })
  .catch(function (error) {
    console.log(error);
  });
}
const responseFacebook = (response) => {
  console.log(response.accessToken)
  axios.post('https://api.tech/sessions/facebook', {
    facebook_token: response.accessToken
  })
 .then(function (response) {
    var userInfo = {id: response.data.data.id, token: response.data.data.attributes['auth-token']}
    cookie.save('user', userInfo);
    console.log(response);
    SignupModal.close()
  })
  .catch(function (error) {
    console.log(error);
  });
}

export default class SignupModal extends Component {

  constructor() {
    super();
    console.log(this)
    this.render.bind(this);
    this.state = {showModal: false}
    this.handleFirstNameChange = this.handleFirstNameChange.bind(this);
    this.handleLastNameChange = this.handleLastNameChange.bind(this);
    this.handleEmailChange = this.handleEmailChange.bind(this);
    this.handlePasswordChange = this.handlePasswordChange.bind(this);


  }

  close() {
    this.setState({ showModal: false });
  }

  open() {
    this.setState({ showModal: true });
  }

  handleFirstNameChange(e) {
    this.setState({firstName: e.target.value});
  }

  handleLastNameChange(e) {
    this.setState({lastName: e.target.value});
  }

  handleEmailChange(e) {
    this.setState({email: e.target.value});
  }

  handlePasswordChange(e) {
    this.setState({password: e.target.value});
  }

  signUp() {
    console.log(this)
    var that = this;
    axios.post('https://api.tech/users', {
      user: {
        email: this.state.email,
        password: this.state.password
      }
    })
    .then(function (response) {
      console.log(response);
      var userInfo = {id: response.data.data.id, token: response.data.data.attributes['auth-token']}
      cookie.save('user', userInfo);
      axios({
        method: 'put',
        url: 'https://api.tech/users/' + response.data.data.id,
        headers: {'Authorization': response.data.data.attributes['auth-token']},
        data: {
          user: {
            first_name: that.state.firstName,
            last_name: that.state.lastName
          }
        }
      });
      that.setState({ showModal: false });
    })
    .catch(function (error) {
      console.log(error);
    });
  }

  handleSelect(eventKey) {
    event.preventDefault();
    alert(`selected ${eventKey}`);
  }
  render () {
    const popover = (
      <Popover id="modal-popover" title="popover">
        very popover. such engagement
      </Popover>
    );
    const tooltip = (
      <Tooltip id="modal-tooltip">
        wow.
      </Tooltip>
    );
    return (
      <div>
        <span onClick={this.open.bind(this)}>Sign Up</span>

        <Modal show={this.state.showModal} onHide={this.close.bind(this)} className="modal-wrapper signup-modal">
          <Modal.Body>
            <Nav bsStyle='pills'   activeKey={this.eventKey}  onSelect={this.handleSelect}>
              <NavItem eventKey={1} title="Item" ><span className="login-nav-tab">Log In</span></NavItem>
              <NavItem eventKey={2} title="Item" ><span className="login-nav-tab">Sign Up</span></NavItem>
            </Nav>
            <form>
              <FormGroup>
                <input value={this.state.firstName} onChange={this.handleFirstNameChange} className="form-control" placeholder="First Name"/>
              </FormGroup>
              <FormGroup>
                <input value={this.state.lastName} onChange={this.handleLastNameChange} className="form-control" placeholder="Last Name"/>
              </FormGroup>
              <FormGroup>
                <input value={this.state.email} onChange={this.handleEmailChange} className="form-control" placeholder="Email"/>
              </FormGroup>
              <FormGroup>
                <input value={this.state.password} onChange={this.handlePasswordChange} className="form-control" placeholder="Password"/>
              </FormGroup>
              <Row>
                <Col md={12}>
                  <p className="term-conditions">
                    By signing up, I agree to the <a href="javascript:void(0);">Terms of Service</a> and <a href="javascript:void(0);">Privacy Policy</a>
                  </p>
                </Col>
                <Col md={12}>
                  <Button onClick={this.signUp.bind(this)} className="btn btn-black btn-block">Sign Up</Button>
                </Col>
              </Row>
            </form>
            <div className="social-signup">
              <span className="divider-or">OR</span>
              <p>
                Sign in with social account
              </p>
              <Row>
                <Col xs={6}>
                  <GoogleLogin
                  className='btn btn-block btn-google'
                  clientId=""
                  buttonText="Google"
                  onSuccess={responseGoogle}
                  onFailure={responseGoogle}
                />
                </Col>
                <Col xs={6}>
                  <FacebookLogin
                  className='btn btn-block btn-facebook'
                  appId=""
                  autoLoad={true}
                  fields="name,email,picture"
                  callback={responseFacebook}
                  cssClass="btn btn-block btn-facebook"
                />
                </Col>
              </Row>
            </div>
          </Modal.Body>
          <Modal.Footer>
            <Button className="btn btn-black" onClick={this.close.bind(this)}>Close</Button>
          </Modal.Footer>
        </Modal>
      </div>
    )
  }

}

import React，{Component}来自“React”
从“react bootstrap”导入{按钮、模式、覆盖装配器、弹出框、工具提示、导航、导航项、行、列、窗体组、字段组、复选框}
从“axios”导入axios；
从“反应cookie”导入cookie；
从“反应facebook登录”导入FacebookLogin；
从“反应谷歌登录”导入谷歌登录；
常量响应日志=（响应）=>{
控制台日志（响应）；
console.log（response.accessToken）
轴心柱https://api.tech/sessions/google', {
google_令牌：response.accessToken
})
.然后（功能（响应）{
var userInfo={id:response.data.data.id，令牌：response.data.data.attributes['auth-token']}
保存（'user'，userInfo）；
控制台日志（响应）；
SignupModal.setState（{showModal:false}）；
})
.catch（函数（错误）{
console.log（错误）；
});
}
const responseFacebook=（response）=>{
console.log（response.accessToken）
轴心柱https://api.tech/sessions/facebook', {
facebook_令牌：response.accessToken
})
.然后（功能（响应）{
var userInfo={id:response.data.data.id，令牌：response.data.data.attributes['auth-token']}
保存（'user'，userInfo）；
控制台日志（响应）；
SignupModal.close（）
})
.catch（函数（错误）{
console.log（错误）；
});
}
导出默认类SignupModal扩展组件{
构造函数（）{
超级（）；
console.log（这个）
这个.render.bind（这个）；
this.state={showmodel:false}
this.handleFirstNameChange=this.handleFirstNameChange.bind（this）；
this.handleLastNameChange=this.handleLastNameChange.bind（this）；
this.handleEmailChange=this.handleEmailChange.bind（this）；
this.handlePasswordChange=this.handlePasswordChange.bind（this）；
}
关闭（）{
this.setState（{showmodel:false}）；
}
开（）{
this.setState（{showmodel:true}）；
}
handleFirstNameChange（e）{
this.setState（{firstName:e.target.value}）；
}
handleLastNameChange（e）{
this.setState（{lastName:e.target.value}）；
}
handleEmailChange（电子邮件）{
this.setState（{email:e.target.value}）；
}
handlePasswordChange（e）{
this.setState（{密码：e.target.value}）；
}
注册（）{
console.log（这个）
var=这个；
轴心柱https://api.tech/users', {
用户：{
电子邮件：this.state.email，
密码：this.state.password
}
})
.然后（功能（响应）{
控制台日志（响应）；
var userInfo={id:response.data.data.id，令牌：response.data.data.attributes['auth-token']}
保存（'user'，userInfo）；
axios({
方法：'放'，
网址：'https://api.tech/users/'+response.data.data.id，
标题：{'Authorization'：response.data.data.attributes['auth-token']}，
数据：{
用户：{
名字：that.state.firstName，
姓氏：that.state.lastName
}
}
});
setState（{showModal:false}）；
})
.catch（函数（错误）{
console.log（错误）；
});
}
handleSelect（事件键）{
event.preventDefault（）；
警报（`selected${eventKey}`）；
}
渲染（）{
常数popover=(
非常流行，这样的订婚
);
常量工具提示=(
哇！
);
返回(
注册
登录
注册

通过注册，我同意

注册
或

使用社交帐户登录

接近
)
}
}

登录模式：

import React, { Component } from 'react'
import { Button, Modal, OverlayTrigger, Popover, Tooltip, Nav, NavItem, Row, Col, FormGroup, FieldGroup, Checkbox } from 'react-bootstrap'
import axios from 'axios';
import FacebookLogin from 'react-facebook-login';
import GoogleLogin from 'react-google-login';
import cookie from 'react-cookie';

const responseGoogle = (response) => {
  console.log(response.accessToken)
  axios.post('https://api.tech/sessions/google', {
    google_token: response.accessToken
  })
  .then(function (response) {
    var userInfo = {id: response.data.data.id, token: response.data.data.attributes['auth-token']}
    cookie.save('user', userInfo);
    console.log(response);
    LoginModal.setState({ showModal: false });
  })
  .catch(function (error) {
    console.log(error);
  });
}
const responseFacebook = (response) => {
  console.log(response.accessToken)
  axios.post('https://api.tech/sessions/facebook', {
    facebook_token: response.accessToken
  })
 .then(function (response) {
    console.log(response); 
    var userInfo = {id: response.data.data.id, token: response.data.data.attributes['auth-token']}
    cookie.save('user', userInfo);
  })
  .catch(function (error) {
    console.log(error);
  });
}

export default class LoginModal extends Component {
  constructor() {
    super();
    this.render.bind(this);
    this.state = {showModal: false}
    this.handleEmailChange = this.handleEmailChange.bind(this);
    this.handlePasswordChange = this.handlePasswordChange.bind(this);
  }

  close() {
    this.setState({ showModal: false });
  }

  open() {
    this.setState({ showModal: true });
  }


  login() {
    console.log(this)
    axios.post('https://api.tech/sessions', {
      email: this.state.email,
      password: this.state.password
    })
    .then(function (response) {
      console.log(response);
      var userInfo = {id: response.data.data.id, token: response.data.data.attributes['auth-token']}
      cookie.save('user', userInfo);
      // console.log(response);
      // var user = cookie.load('user');
      // console.log("hello");
      // console.log(user);

      //this.setState({ showModal: false });
    })
    .catch(function (error) {
      console.log(error);
    });
  }

  handleEmailChange(e) {
    this.setState({email: e.target.value});
  }

    handlePasswordChange(e) {
    this.setState({password: e.target.value});
  }

  handleSelect(eventKey) {
    event.preventDefault();
    alert(`selected ${eventKey}`);
  }
  render () {
    const popover = (
      <Popover id="modal-popover" title="popover">
        very popover. such engagement
      </Popover>
    );
    const tooltip = (
      <Tooltip id="modal-tooltip">
        wow.
      </Tooltip>
    );
    return (
      <div>
        <span onClick={this.open.bind(this)}>Log In</span>

        <Modal show={this.state.showModal} onHide={this.close.bind(this)} className="modal-wrapper login-modal-wrapper">
          <Modal.Body>
            <Nav bsStyle='pills'   activeKey={this.eventKey}  onSelect={this.handleSelect}>
              <NavItem eventKey={1} title="Item" ><span className="login-nav-tab">Log In</span></NavItem>
              <NavItem eventKey={1} title="Item" ><span className="login-nav-tab">Sign Up</span></NavItem>
            </Nav>
            <form>
              <FormGroup >
                    <input value={this.state.email} onChange={this.handleEmailChange} className="form-control" placeholder="Email"/>
              </FormGroup>
              <FormGroup>
                <input value={this.state.password} onChange={this.handlePasswordChange} className="form-control" placeholder="Password"/>
              </FormGroup>
              <Row className='top-space'>
                  <Col sm={6}>
                    <Checkbox className="checkbox-login"> Remember Me </Checkbox>
                  </Col>
                  <Col sm={6} className='forgot-password'>
                    <a href="">Forgot Password</a>
                  </Col>
                </Row>
                <Row className='top-space'>
                  <Col md={12}>
                    <Button onClick={this.login.bind(this)} className="btn btn-black btn-block">Login</Button>
                  </Col>
                </Row>
              </form>
            <div className="social-signup">
              <span className="divider-or">OR</span>
              <p>
                Sign in with social account
              </p>
              <Row>
                <Col xs={6}>
                  <GoogleLogin
                  className='btn btn-block btn-google'
                  clientId=""
                  buttonText="Google"
                  onSuccess={responseGoogle}
                  onFailure={responseGoogle}
                />
                </Col>
                <Col xs={6}>
                  <FacebookLogin
                  className='btn btn-block btn-facebook'
                  appId=""
                  autoLoad={true}
                  fields="name,email,picture"
                  callback={responseFacebook}
                  onSuccess={this.close.bind(this)}
                  cssClass="btn btn-block btn-facebook"
                />
                </Col>
              </Row>
            </div>
          </Modal.Body>
          <Modal.Footer>
            <Button className="btn btn-black" onClick={this.close.bind(this)}>Close</Button>
          </Modal.Footer>
        </Modal>
      </div>
    )
  }

}

import React，{Component}来自“React”
从“react bootstrap”导入{按钮、模式、覆盖装配器、弹出框、工具提示、导航、导航项、行、列、窗体组、字段组、复选框}
从“axios”导入axios；
从“反应facebook登录”导入FacebookLogin；
从“反应谷歌登录”导入谷歌登录；
从“反应cookie”导入cookie；
常量响应日志=（响应）=>{
console.log（response.accessToken）
轴心柱https://api.tech/sessions/google', {
google_令牌：response.accessToken
})
.然后（功能（响应）{
var userInfo={id:response.data.data.id，令牌：response.data.data.attributes['auth-token']}
保存（'user'，userInfo）；
控制台日志（响应）；
LoginModal.setState（{showModal:false}）；
})
.catch（函数（错误）{
console.log（错误）；
});
}
const responseFacebook=（response）=>{
console.log（response.accessToken）
轴心柱https://api.tech/sessions/facebook', {
facebook_令牌：response.accessToken
})
.然后（功能（响应）{
控制台日志（响应）；
var userInfo={id:response.data.data.id，令牌：response.data.data.attributes['auth-token']}
保存（'user'，userInfo）；
})
.catch（函数（错误）{
console.log（错误）；
});
}
导出默认类LoginModal扩展C
import React, { Component } from 'react';
import LoginModal from './modals/LoginModal'
import SignupModal from './modals/SignupModal'
import axios from 'axios';
import { Nav, NavItem, Navbar, NavDropdown, MenuItem  } from 'react-bootstrap'
import cookie from 'react-cookie';

export default class MyNavbar extends Component {


  constructor() {
    super();
    var user = cookie.load('user');
    var that= this;
    this.state = {name: null, signedIn: false}
    if (user){
      axios.get('https://api.tech/users/' + user.id)
        .then(function (response) {
          console.log(response);
          that.setState({name: response.data.data.attributes['first-name'] + ' ' + response.data.data.attributes['last-name'], signedIn: true});
          //this.setState({ showModal: false });
        })
        .catch(function (error) {
          console.log(error);
        });
      }
    this.render.bind(this);
  }

  render() {

    return (
      <Navbar inverse className="navbar-wrapper">
        <Navbar.Header>
          <Navbar.Brand>
          </Navbar.Brand>
          <Navbar.Toggle />
        </Navbar.Header>
        <Navbar.Collapse>
          <Nav className="navleft">
            <NavItem eventKey={1} href="#">Shop <i className="fa fa-home"></i></NavItem>
            <NavItem eventKey={2} href="#">Explore <i className="fa fa-compass"></i></NavItem>
            <NavItem  href="#">Alerts <i className="fa fa-bell-o"></i></NavItem>
          </Nav>
          <Nav pullRight className="navright">
            <NavItem eventKey={3} href="#">Style Game</NavItem>
            <NavItem eventKey={4} href="#">Editor's Blog</NavItem>
            <NavItem href="#" className={this.state.signedIn === true ? '' : 'hidden'}>{this.state.name}</NavItem>
            <NavItem eventKey={2} href="#" className={this.state.signedIn === true ? 'hidden' : ''}><SignupModal/></NavItem>
            <NavItem eventKey={1} href="#" className={this.state.signedIn === true ? 'hidden' : ''}><LoginModal/></NavItem>
          </Nav>
        </Navbar.Collapse>
      </Navbar>

    );
  }
}