0
나는 반갑습니다. 전 사과드립니다. 그것은 가까이 
어떻게하면 부트 스트랩과 반응하여 navbar에서 모달을 구조화 할 수 있습니까?
: 내가 같이 내 탐색이 필요
import React, { Component } from 'react';
import AuthModal from './modals/AuthModal'
import { Nav, NavItem, Navbar, NavDropdown, MenuItem } from 'react-bootstrap'
export default class MyNavbar extends Component {
render() {
return (
<Navbar inverse>
<Navbar.Header>
<Navbar.Brand>
<span className="logo">SITE</span>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav className="navleft">
<NavItem eventKey={1} href="#">Link</NavItem>
<NavItem eventKey={2} href="#">Link</NavItem>
<NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
<MenuItem eventKey={3.1}>Action</MenuItem>
<MenuItem eventKey={3.2}>Another action</MenuItem>
<MenuItem eventKey={3.3}>Something else here</MenuItem>
<MenuItem divider />
<MenuItem eventKey={3.3}>Separated link</MenuItem>
</NavDropdown>
</Nav>
<Nav pullRight className="navright">
<NavItem eventKey={1} href="#"><AuthModal/></NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
}
: 여기 내 메뉴 바 구성 요소의 "에서 로그인"을 제외하고 
, "회원 가입"과 하나가 될 것으로 보인다 버튼을 누르십시오. 2 개의 별도 버튼이 필요합니다. 내 실제 모달에서
, 나는 탐색에 2 개 개의 별도 링크, 하나의 모달이 그래서 내가 그것을 가지고 어떻게
import React, { Component } from 'react'
import { Button, Modal, OverlayTrigger, Popover, Tooltip, Nav, NavItem, Row, Col, FormGroup, FieldGroup, Checkbox } from 'react-bootstrap'
export default class AuthModal extends Component {
constructor() {
super();
this.render.bind(this);
this.state = {showModal: false}
}
close() {
this.setState({ showModal: false });
}
open() {
this.setState({ showModal: true });
}
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>
<span onClick={this.open.bind(this)}>Log In</span>
<Modal show={this.state.showModal} onHide={this.close.bind(this)}>
<Modal.Body>
<Row>
<Col md={12}>
<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>
</Col>
</Row>
<Row className='top-space' >
<form>
<FormGroup >
<Row>
<Col md={12}>
<input className="col-md-10 col-md-offset-1 top-space fat-input" placeholder="Email"/>
<input className="col-md-10 col-md-offset-1 top-space fat-input" placeholder="Password"/>
</Col>
</Row>
<Row className='top-space'>
<Col md={5} mdOffset={1}>
<Checkbox className="checkbox-login"> Remember Me </Checkbox>
</Col>
<Col md={6} className='forgot-password'>
<a href="">Forgot Password</a>
</Col>
</Row>
<Row className='top-space'>
<Col md={10} mdOffset={1}>
<Button bsStyle="btn btn-black btn-block">Login</Button>
</Col>
</Row>
</FormGroup>
</form>
</Row>
<hr></hr>
<Row>
<Col md={12} className="text-center">
Login with blah
</Col>
</Row>
<Row className="top-space">
<Col md={6}>
<Button bsStyle='btn btn-block btn-danger'>
Google
</Button>
</Col>
<Col md={6}>
<Button bsStyle='btn btn-block btn-info'>
Facebook
</Button>
</Col>
</Row>
</Modal.Body>
<Modal.Footer>
<Button onClick={this.close.bind(this)}>Close</Button>
</Modal.Footer>
</Modal>
</div>
)
}
}
이 있습니다. 클릭 한 항목에 따라 모달에 가입 정보 또는 로그인 정보가 표시됩니다.