首页 > 其他 > 详细

react-router传参

时间:2017-04-26 15:19:33      阅读:381      评论:0      收藏:0      [点我收藏+]

点击表单或按钮跳转

<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传参

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!