Post List

2016년 10월 25일 화요일

react-router-tutorial #12 navigating

이번 예제를 위하여 12-navigating 디렉토리로 이동 후 npm install을 실행하자.
이번에는 링크를 따라 움직이다 입력을 한 후 버튼을 클릭할 경우 응답을 하는 부분을 구현해본다.


1. modules 밑에 Repos.js 파일에 대하여 아래와 같이 구현한다.



[binrang@binrang modules]$ pwd
/home/binrang/react/react-router-tutorial/lessons/12-navigating/modules
[binrang@binrang modules]$ vi Repos.js 
import React from 'react'
import NavLink from './NavLink'
export default React.createClass({

// context 에서 router 에 요청하는 부분. 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}`
    console.log(path)
this.context.router.push(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>
          {/* 여기에 폼 을 구현한다.  */}
          <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>
    )
  }
})

2. Repo.js 파일을 수정한다.

import React from 'react'
export default React.createClass({
  render() {
    const { userName, repoName } = this.props.params
    return (
      <div>
        <h2>{userName} / {repoName}</h2>
      </div>
    )
  }
})

3. npm start를 하여 웹을 확인해보자.
홈 화면

Repos를 클릭하면 추가된 폼을 확인할 수 있다.

React Router를 클릭하면 파라미터에 따라 표시되는 것을 확인.

React 를 클릭해도 파라미터를 표시.

텍스트 박스에 입력후 Go를 클릭해도 파라미터를 확인할 수 있다.

Good.

참조 URL : 12-navigating