Finish lesson 12:将填入的内容构造成链接给router渲染

Author: TsaiKoga

lessons/12-navigating/modules/Repos.js

@@ -1,14 +1,37 @@
 import React from 'react'
 import NavLink from './NavLink'
+import { browserHistory } from 'react-router'
 
 export default React.createClass({
+  // ask for `router` from context
+  contextTypes: {
+    router: React.PropTypes.object
+  },
+
+  handleSubmit(event) {
+    event.preventDefault();
+    const userName = event.target.elements[0].value;
+    const repo = event.target.elements[1].value;
+    const path = `/repos/${userName}/${repo}`;
+    this.context.router.push(path); // 将form里的内容形成链接交给route去渲染。也就是只要有链接，就可以相应的渲染。
+    console.log(path);
+  },
+
   render() {
     return (
       <div>
         <h2>Repos</h2>
         <ul>
           <li><NavLink to="/repos/reactjs/react-router">React Router</NavLink></li>
           <li><NavLink to="/repos/facebook/react">React</NavLink></li>
+          {/* Add this form */}
+          <li>
+            <form onSubmit={this.handleSubmit}>
+              <input type="text" placeholder="userName"/> / {' '}
+              <input type="text" placeholder="repo"/>{' '}
+              <button type="submit">Go</button>
+            </form>
+          </li>
         </ul>
         {this.props.children}
       </div>