Question

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

我有以下两个组成部分：

UI /组件/主布局/报头/ 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 /组件/模态/ 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>
        )
    }
}

我怎样才能从其他组件中打开模态？

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何从另一个组件显示react-bootstrap模式

1 个答案: