码迷,mamicode.com
首页 > 其他好文 > 详细

react-router传参

时间:2017-04-26 15:48:54      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:onsubmit   handles   targe   target   获取   for   one   row   tar   

点击表单或按钮跳转

<form onSubmit={this.handleSubmit}>
  <input type="text" placeholder="userName"/>
  <input type="text" placeholder="repo"/>
  <button type="submit">Go</button>
</form>

第一种方法是使用browserHistory.push

import { browserHistory } from ‘react-router‘

// ...
  handleSubmit(event) {
    event.preventDefault()
    const userName = event.target.elements[0].value
    const repo = event.target.elements[1].value
    const path = `/repos/${userName}/${repo}`
    browserHistory.push(path)
  },

第二种方法是使用context对象

export default React.createClass({

  // ask for `router` from context
  contextTypes: {
    router: React.PropTypes.object
  },

  handleSubmit(event) {
    // ...
    this.context.router.push(path)   // 无参数
    this.context.router.push({pathname: path, state: {}})   // 有参数
  },
})

// 获取参数

componentDidMount() {
  this.setState({
     params: this.props.location.state.params
  })
}

 

react-router传参

标签:onsubmit   handles   targe   target   获取   for   one   row   tar   

原文地址:http://www.cnblogs.com/yangstar90/p/6652566.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!