表单处理相关总结

表单处理 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({ 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({ 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()) { 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，将阻止路由的切换，否则就返回一个字符串，提示用户决定是否要切换。