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="登录"/>