问模态不像预期的那样接近
EN

Stack Overflow用户

提问于 2018-02-02 12:35:51

回答 1查看 512关注 0票数 1

期望行为

单击Signin，Modal将打开
单击模式外部或按esc，模态关闭。

实际行为

单击Signin，Modal不会打开，因为onClose会立即启动

这里是程序的流程：

App.js被呈现，头被呈现，一个openSignIn回调道具被传递给它，当用户单击SignIn链接时触发openSignIn回调函数，当回调被调用时，它将导致App.js中的signinOpen变为真，signinOpen作为在注册组件中的支柱open与closeSignin回调函数一起传递，当Registration.js收到一个支柱时，它将调用componentWillReceiveProps函数，注册组件中的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;