表单处理相关总结

表单处理
Link组件用于正常的用户点击跳转，但是有时还需要表单跳转、点击按钮跳转等操作。这些情况怎么跟React Router对接呢？
下面是一个表单。

Go

第一种方法是使用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)
},
})

十二、路由的钩子
每个路由都有Enter和Leave钩子，用户进入或离开该路由时触发。

＜Route path="inbox" component={Inbox}> ＜Redirect from="messages/:id" to="/messages/:id" />

上面的代码中，如果用户离开/messages/:id，进入/about时，会依次触发以下的钩子。
/messages/:id的onLeave
/inbox的onLeave
/about的onEnter
下面是一个例子，使用onEnter钩子替代组件。

onEnter钩子还可以用来做认证。

const requireAuth = (nextState, replace) => {
if (!auth.isAdmin()) {
// Redirect to Home page if not an Admin
replace({ pathname: ‘/’ })
}
}
export const AdminRoutes = () => {
return (

)
}

下面是一个高级应用，当用户离开一个路径的时候，跳出一个提示框，要求用户确认是否离开。

const Home = withRouter(
React.createClass({
componentDidMount() {
this.props.router.setRouteLeaveHook(
this.props.route,
this.routerWillLeave
)
},

routerWillLeave(nextLocation) {
  // 返回 false 会继续停留当前页面，
  // 否则，返回一个字符串，会显示给用户，让其自己决定
  if (!this.state.isSaved)
    return '确认要离开？';
},

})
)

上面代码中，setRouteLeaveHook方法为Leave钩子指定routerWillLeave函数。该方法如果返回false，将阻止路由的切换，否则就返回一个字符串，提示用户决定是否要切换。
（完）