react学习日志3

demo2

1.分析案例

以下这个demo来自https://github.com/liwudi  

作为自己学习给自己分析一下代码

这是一个简单的路由功能的Redirect 的demo

实现结果为，当点击非公开页面是，由点击的路由跳到判断是否登陆的路由，代码 如下

App.js

render() {
    return(
        <Router>
            <div>
                <AuthButton isLogin={this.state.isLogin} />
                <ul>
                    <li><Link to="/public">公开界面</Link></li>
                    <li><Link to="/private">非公开界面</Link></li>
                </ul>
                <Route path="/public" component={Public}/>
                <Route path="/login" component={Login} />
                <Route path="/private" render={()=>(
                    this.state.isLogin?(
                        <Private />
                    ):(
                        <Redirect to="/login" />
                    )
                )}/>
            </div>
        </Router>
    )
}

当点击非公开页面时，判断isLogin的状态，只有当true的时候才会显示正确的页面。

Login组件

import React, { Component } from 'react';
import LoginBtn from './LoginBtn';
export default class Login extends Component {
    constructor(props){
        super(props);
        console.log(this.props);
        this.state = {
            redirectToReferrer: false,
        }
    }
    login(){
        this.setState({
            redirectToReferrer: true,
        });
        localStorage.setItem("isLogins", true);
    }
    render(){
        return (
            <div>若想访问,请先登录<LoginBtn text = "登录" click={this.login.bind(this)}/></div>
        )
    }
}

当点击登陆时，调用LoginBtn，在缓存里设置isLogins状态值

LoginBtn组件

import React, { Component } from 'react';

export default class LoginBtn extends Component {
    constructor(props){
        super(props);

    }
    render(){
        return (
            <button onClick = {
                this.props.click
            }>{this.props.text}</button>
        )
    }
}

该组件为一个button按钮，按钮上的值为props.text

AuthButton 

import React, { Component } from 'react';


import LoginBtn from './LoginBtn';
export default class AuthButton extends Component {
    constructor(props){
        super(props);
    }
    exit(){
        localStorage.setItem("isLogins", false);
        console.log(this.props);
    }
    render(){
        return (
            (this.props.isLogin)?<p>欢迎!登出<LoginBtn text="退出" click={this.exit.bind(this)}/></p>:<p>请您先登陆</p>
        )
    }
}

该组件为点击登出时，将缓存里的isLogins重新赋值为false

2.修改代码

（1）为login添加登陆判断条件，涉及知识点，外部获取input的value值

 a. 为login组件添加改变框内值的方法，通过监测value值，与key进行匹配

change=(e)=>{
    this.setState({value: e.target.value});
};
if(this.state.value==this.state.key){
    localStorage.setItem("isLogins", true);
}
<input  onChange={this.change}  value={this.state.value}/>
   
   

    
    

   
   

react 表单知识后续再进行学习，现在，继续学习react router