[英]Modal does not close as expected
预期行为
点击登录,模式打开
在模态之外单击或单击esc,模态关闭
实际行为
这是程序的流程:
呈现App.js,呈现Header并传递openSignIn
回调道具,当用户单击SignIn Link并调用该回调时,将触发openSignIn
回调函数,这将导致signinOpen
中的signinOpen变为是的, signinOpen
是在Registration组件中的道具open
时与closeSignin
回调函数一起传递的,当Registration.js接收到道具时,它将调用componentWillReceiveProps
函数,并且Registration组件中的isOpen
状态将变为open
道具是什么
App.js:
import React, { Component } from 'react';
import {BrowserRouter as Router,Route} from 'react-router-dom';
import './App.css';
//Components imports
import Homepage from './components/Homepage/Homepage';
import Header from './components/Header/Header'
import Registration from './components/Registration/Registration';
import About from './components/About/About';
class App extends Component {
state = {
signinOpen:false
}
openSignIn = ()=>{
console.log("openSignin in app.js called")
this.setState({signinOpen:true},()=>{
console.log("in app.js,signinOpen is",this.state.signinOpen);
});
}
closeSignin = ()=>{
console.log("closeSignin called in app.js");
this.setState({signinOpen:false});
}
render() {
return (
<Router>
<div className="App">
<Header openSignIn = {this.openSignIn}/>
<Route path="/" exact render = {()=><Homepage/> }></Route>
<Route path="/about" component={About}/>
<Registration
open = {this.state.signinOpen}
closeSignin = {this.closeSignin}
/>
</div>
</Router>
);
}
}
export default App;
Registration.js:
import React,{Component} from 'react';
import './Registration.css';
import { Modal } from 'semantic-ui-react'
class Registration extends Component{
constructor(props){
super(props);
this.state = {
isOpen:false
}
this.handleClose = this.handleClose.bind(this);
}
componentWillReceiveProps(nextProps){
console.log("next props called, nextProps.open is: ")
console.log(nextProps.open);
this.setState({isOpen:nextProps.open},()=>{
console.log("now isOpen in Registration state is: ")
console.log(this.state.isOpen);
});
}
handleClose = ()=>{
console.log("handle close in registration called");
this.setState({isOpen:false});
this.props.closeSignin();
}
render(){
return(
<Modal
open={this.state.isOpen}
onClose={()=>this.handleClose}
closeOnEscape={true}
closeOnRootNodeClick={true}
closeIcon= {true}
>
<Modal.Header>
Delete Your Account
</Modal.Header>
<Modal.Content>
<p>Are you sure you want to delete your account</p>
</Modal.Content>
</Modal>
)
}
}
export default Registration;
Header.js:
import React,{Component} from 'react';
import './Header.css';
import { Grid } from 'semantic-ui-react'
import { Link } from 'react-router-dom';
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
class Header extends Component{
state = {
loggedIn:false
}
render(){
return(
<Grid divided='vertically'>
<Grid.Row>
<Grid.Column width={5}></Grid.Column>
<Grid.Column width={7}>
<header className="header">
<Link className="header-button" to="/about">About</Link>
<Link className="header-button" to="/polls">Poll List</Link>
{/*Instead of just adding the following link, we will do a check if the user is logged in,
is he's logged in we show a dropdown menu that says welcome */}
<Link className="header-button" to="#" onTouchTap={this.props.openSignIn}>SignIn</Link>
</header>
</Grid.Column>
<Grid.Column width={2}></Grid.Column>
</Grid.Row>
</Grid>
)
}
}
export default Header;
开箱即用,SUIR Modal
组件的功能完全符合您的期望,包括内部处理打开状态。 在Modal
组件上定义“打开”道具后,您将在内部选择默认状态,这使您有责任控制该状态。
我建议使用您想要触发模式的组件定义一个trigger
道具,并使用SUIR提供的所有状态功能。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.