请教一下，登录事件的操作思路。

#1

本人刚开始学reactjs，想请教

1、判断是否登录（打算用localstorage）
2、登录前后的页面操作流程，是否按照以下的方式（不知道怎么刷新父页面）
3、能否提供一下登录功能的sample吗？

App.js

class App extends Component{
    constructor(){
        super();

        this.state = {
          isLogin: false
        }
    }

    render(){

        let isLogin = this.state.isLogin;

        let page = isLogin ? (
            <Home/>
        ):(
            <Login/>
        )

        return (
            <div>
               {page}
            </div>
        );
    }
}

Login.js

class Login extends React.Component{
    onLogin(){
       //这里怎么写？
    }

    render(){
        return (
            <div id='main'>
                <div id="login-header">
                    <img src={logo} alt="logo"/>
                </div>

                <div id='login-main'>
                    <TextField
                        label='账号'
                        className='login-username'
                        iconProps={ { iconName: 'BlockContact' } }
                    />

                    <TextField
                        label='密码'
                        className='login-password'
                        iconProps={ { iconName: 'Lock' } }
                        type='password'
                    />

                    <DefaultButton
                        primary={true}
                        text='登录'
                        className='login-button'
                        onClick={ this.onLogin }
                    />
                </div>
            </div>
        );
    }
}

export default Login;
#2

你需要redux

#3

如何刷新整个父页面呢

#4

redux就是用来解决组件间的通信问题的，如果不了解可以去看看相关教程，如果你只想用你目前这种方式实现的话，你就把onLogin这个方法定义在App组件中，然后把它作为Login组件的props传递下去

#5

@SundayPig 谢谢你啦。

redux，等会就去看一下相关教程。

现在用的以下方式也可以实现，但是不知道这种做法，有没什么优缺点？

App.js

class App extends React.Component{
    constructor(){
        super();

        this.state = {
            isLogin: false
        }

    }

    handleLogin = (loginStatus) => {
            if (loginStatus == 200){
                this.setState({
                    isLogin:true
                })
            }
    };

    render(){

        let isLogin = this.state.isLogin;

        let page = isLogin ? (
            <Home/>
        ):(
            <Login handleLogin={this.handleLogin}/>
        );

        return (
            <div>
               {page}
            </div>
        );
    }
}

export default App;

Login.js

class Login extends React.Component{
    constructor(props){
        super(props);

    }

    onLogin = () => {
        this.props.handleLogin(200);
    };

    render(){
        return (
            <div id='main'>
                <div id="login-header">
                    <img src={logo} alt="logo"/>
                </div>

                <div id='login-main'>
                    <TextField
                        label='账号'
                        defaultValue='wangwenyu'
                        className='login-username'
                        iconProps={ { iconName: 'BlockContact' } }
                    />

                    <TextField
                        label='密码'
                        defaultValue='12345678'
                        className='login-password'
                        iconProps={ { iconName: 'Lock' } }
                        type='password'
                    />

                    <DefaultButton
                        primary={true}
                        text='登录'
                        className='login-button'
                        onClick={ this.onLogin }
                    />
                </div>
            </div>
        );
    }
}

export default Login;
#6

组件嵌套层次深了，就需要一层一层传递下去，麻烦，另外如果是同级组件间要通信还需要把状态提升至共同的父级组件里

1 Like
#7

组件间数据交互推荐用 mobx。reudx 太麻烦了。