如何从另一个组件显示反应引导模式[重复]

Posted 2023-02-21

【中文标题】如何从另一个组件显示反应引导模式[重复]

【英文标题】：How to display a react-bootstrap modal from another component [duplicate]

【发布时间】：2017-08-29 18:57:57

【问题描述】：

我有一个我正在开发的 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>
        )
    

我怎样才能完成从我的其他组件打开模式？

【问题讨论】：

不，我想通过导航栏上的链接打开它

哦，那错字了？ :) 您可以通过为您的模态组件创建一个函数来执行此操作，然后使用父组件中的refs 调用该函数。其实很容易。这个问题已经有了答案，让我看看能不能找到...

你在使用 redux 吗？ LoginRegistration 组件是否定义在LoggedOutNav 的父组件中，如果是这种情况可以调用handler触发打开modal

【参考方案1】：

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 />