从ReactJS中的其他组件打开模式
从ReactJS中的其他组件打开模式
提问于 2018-06-04 03:15:16
嘿，我有一个关于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;回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-04 04:17:26
使用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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50670067
复制相关文章
相似问题