[英]Open modal from other component in ReactJS
嘿,我有一個關於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;
使用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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.