时间戳

首页 > 解决方案 > 从 ReactJS 中的其他组件打开模式

javascript - 从 ReactJS 中的其他组件打开模式

问题描述

嘿，我有一个关于 ReactJS 的问题，因为我尝试使用模态react-bootstrap并在另一个组件中打开它。但是什么也没发生，请查看我的代码并给我一些建议。我尝试LoginModal使用组件调用功能，onClick="LoginModal.handleShow"但这不起作用。

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

class LoginModal extends React.Component {
  constructor(props, context){
    super(props, context);
    this.handleShow = this.handleShow.bind(this);
    this.handleClose = this.handleClose.bind(this);
    this.state = {
        show: false
    }
}
handleShow() {
    this.setState({ show: true })
}
handleClose(){
    this.setState({ show: false })
}
render() {

    return (
       <div>
          <Modal show={this.state.show} onHide={this.handleClose}>
             <Modal.Header closeButton>
               <Modal.Title>Modal Heading</Modal.Title>
             </Modal.Header>
             <Modal.Body>
               <h1>This is modal body</h1>
             </Modal.Body>
          </Modal>
        </div>
    )
  }
}
export default LoginModal

以及呈现的 App 组件

import React, { Component } from 'react';
import LoginModal from './components/Login/Login'
import {
  Navbar, 
  NavItem,
  Nav,
  Button
} from 'react-bootstrap';
import {
  BrowserRouter as Router,
  Route,
  Switch,
 } from 'react-router-dom'

class App extends Component {

render(){
    return (
      <Router>
        <div className="menu-bar">
           <LoginModal></LoginModal>
             <Navbar inverse collapseOnSelect>
               <Nav>
                 <NavItem>
                   <Button onClick={LoginModal.handleShow}>Login</Button>
                 </NavItem>
                </Nav>
              </Navbar>

                <Switch>
                    <Route exact path="/" component={Home}/>
                </Switch>
            </div>
        </Router>
    )
  }
}
export default App;

标签： javascriptreactjs

解决方案

使用ref关键字来引用LoginModal. 然后handleShow从引用中调用。

class App extends Component {

 loginModalRef = ({handleShow}) => {
   this.showModal = handleShow;
 }

 onLoginClick = () => {
  this.showModal();
 }


 render(){
    return (
       <Router>
        <div className="menu-bar">
           <LoginModal  ref={this.loginModalRef} ></LoginModal>
             <Navbar inverse collapseOnSelect>
               <Nav>
                 <NavItem>
                   <Button onClick={this.onLoginClick}>Login</Button>
                 </NavItem>
                </Nav>
              </Navbar>

                <Switch>
                    <Route exact path="/" component={Home}/>
                </Switch>
            </div>
        </Router>
    )
  }
}

在这里，我准备了 stackblitz 片段供您在线测试。https://stackblitz.com/edit/react-bxn5kj?file=index.js

推荐阅读