react.js路由(4.x)：模拟一个用户登录

1、先写一个用户登录界面
login.js：

import React from 'react';

export default  class Login extends React.Component{
    render(){
        return <div>
            <h2>用户登录</h2>
            <p><span>用户名：</span><input/></p>
            <p><span>密  码：</span><input/></p>
            <p><input type="submit" value="登录"/></p>
        </div>
    }
}

要想展示出来，就得配置路由。
router-demo.js中：

import Login from "./login"

<li><Link to="/login">用户登录</Link></li>

 <Route  path="/login" component={Login}/>

2、界面已经ok，接下来就是要 获取文本框的用户名和密码

这一部分知识参考文档：
https://facebook.github.io/react/docs/handling-events.html

login.js代码：

import React from 'react';

export default  class Login extends React.Component{
    // 构造
      constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            user_name:"",
            user_pwd:""
        };
      }

    render(){
        return <div>
            <h2>用户登录</h2>
            <p>
                <span>用户名：</span>
                <input type="text" onChange={(e)=>{
                    this.setUserInfo(e,"user_name")
                }}/>
            </p>
            <p>
                <span>密  码：</span>
                <input type="password" onChange={(e)=>{
                    this.setUserInfo(e,"user_pwd")
                }}/>
            </p>
            <p><input type="submit" onClick={()=>{
                alert(this.state.user_name+":"+this.state.user_pwd);
            }} value="登录"/></p>
        </div>
    }

    setUserInfo(event, key){
        let obj = {};
        obj[key] = event.target.value;

        this.setState(obj);
    }
}

代码解析：2个文本框都的onChange事件里都调用同一个方法传递一个key值和event事件本身。
用key区分是为了用setUserInfo()这同一个函数。
在这个函数里实现了对传递进来的文本框的值的保存。

3、路由跳转

比如我们点击登录（暂时不做登录判断）之后，需要跳转到 help帮助页面。

<input type="submit" onClick={()=>{
                this.props.history.push("/help");
            }} value="登录"/>