Question

预期行为

点击登录，模态打开
点击模态外部或点击esc，模态关闭

实际行为

点击登录，因为onClose立即触发，模态无法打开

以下是该计划的流程：

呈现App.js，渲染Header并向其传递openSignIn回调道具，当用户单击SignIn Link并且调用回调时触发openSignIn回调函数，这将导致App.js中的signinOpen变为true，当Register.js收到时，signinOpen将作为注册组件中的prop open与closeSignin回调函数一起传递它将调用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;

Answer 1

开箱即用，SUIR Modal组件的功能与您期望的完全相同，包括在内部处理开放状态。您定义“开放”的那一刻。在Modal组件上的prop，你选择退出内部的默认状态，这使你负责控制该状态。

我建议使用您要触发模式的组件定义trigger道具，并使用SUIR提供的所有状态功能。

模态未按预期关闭

1 个答案: