模态没有按预期关闭

Question

预期行为

• 点击登录，模式打开

• 在模态框外点击或按esc，模态框关闭

实际行为

• 点击 Signin，Modal 无法打开，因为 onClose 会立即触发

这是程序的流程：

App.js被渲染，Header被渲染并传入一个openSignIn回调props，当用户点击SignIn Link时触发openSignIn回调函数，当回调被调用时，会导致App.js 中的signinOpen 变为 true，signinOpen 在 Registration 组件中作为 prop open 与 closeSignin 回调函数一起传递，当 Registration.js 收到一个 prop 时，它将调用 componentWillReceiveProps 函数和 @注册组件中的 987654328@ 状态将变为 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;

Answer 1

开箱即用，SUIR Modal 组件的功能完全符合您的预期，包括在内部处理打开状态。当您在 Modal 组件上定义 'open' 属性时，您将在内部选择退出默认状态，这使您负责控制该状态。

我建议使用您想要触发模式的组件定义一个 trigger 属性并使用 SUIR 提供的所有状态功能。