来自ReactJS中其他组件的开放模式

Question

嘿，我有一个关于ReactJS的问题，因为我尝试使用react-bootstrap使其成为模态，然后在另一个组件中将其打开。 但是没有任何反应，请查看我的代码并给我一些建议。 我尝试使用onClick="LoginModal.handleShow"从LoginModal组件调用功能，但这没有用。

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;

Answer 1

使用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