首页 文章

如何从另一个组件显示react-bootstrap模式[重复]

提问于
浏览 次
1

这个问题在这里已有答案：

我有一个Meteor React应用程序，我正在开发我要在模式中实现登录/注册功能 . 我不确定如何通过单击我的注册或登录按钮来打开模式

我有以下两个组成部分：

ui/components/main-layout/header/LoggedOutNav.jsx

import React, { Component } from 'react'

export default class LoggedOutNav extends Component {
    render() {
        return(
            <ul className="nav navbar-nav">
                <li>
                    <a href="#">
                        <i className="fa fa-sign-in" aria-hidden="true"></i>
                        &nbsp;
                        Log In
                    </a>
                </li>
                <li>
                    <a href="#loginRegistration">
                        <i className="fa fa-user-plus" aria-hidden="true"></i>
                        &nbsp;
                        Sign Up
                    </a>
                </li>
            </ul>
        )
    }
}

ui/components/modals/LoginRegistration.jsx

import React, { Component } from 'react'
import { Modal } from 'react-bootstrap'

export default class LoginRegistration extends Component {
    getInitialState() {
        return { showModal: false }
    }

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

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

    render() {
        return (
            <Modal show={this.state.showModal} onHide={this.close}>
                {/* Irrelevant modal code here */}
            </Modal>
        )
    }
}

我怎么能完成从我的其他组件打开模态？

javascript reactjs bootstrap-modal react-bootstrap

1 回答

  • 0
    import React, { Component } from 'react'
import { Modal } from 'react-bootstrap'

export default class LoggedOutNav extends Component {
    constructor(){
        this.state = {
            showModal: false,
            activeModal: ''
        }

        this.modalDisplay = this.modalDisplay.bind(this);
    }
    modalDisplay(e){
        this.setState({
            showModal: !this.state.showModal,
            activeModal: e.target.getAttribute('data-tab')
        });
    }
    render() {
        return(
            <div>
                <ul className="nav navbar-nav">
                    <li 
                        onClick={ this.showModal }
                        data-tab = 'login'>
                        <a href="#">
                            <i className="fa fa-sign-in" aria-hidden="true"></i>
                            &nbsp;
                            Log In
                        </a>
                    </li>
                    <li
                        onClick={ this.showModal }
                        data-tab = 'signup'>
                        <a href="#loginRegistration">
                            <i className="fa fa-user-plus" aria-hidden="true"></i>
                            &nbsp;
                            Sign Up
                        </a>
                    </li>
                </ul>
                <div>
                    {
                        this.state.showModal
                        &&
                        <Modal modalType={ this.state.activeModal } onHide={this.modalDisplay} data-tab= ""/>
                    }
                </div>
            </div>
        )
    }
}

    您可以将模态类型传递给Modal组件，或使用三元运算符进行渲染

    {
  this.state.activeModal === 'login' ? 
    <Login /> : 
    <SignUp />
}
    回复于

相关问题