试着用React写项目-利用react-router解决跳转路由等问题（四）

2019-11-06 09:55:13

字体：大中小

来源：转载

供稿：网友

Route处理表单

因为之前在做通配符跳转的过程中写了个Three.js，这次只要稍作修改就能用

官方的说明在https://github.com/reactjs/react-router-tutorial/tree/master/lessons/12-navigating 英文好的可以直接看

首先是在render里加个表单

官方给出了2种解决方案一个是browserHistory.push，还有个是context对象

例子选用的是 context对象的方式完成跳转，完整如下

import React from 'react';import styled from 'styled-components';import NavLink from './../component/nav/NavLink';const H2 = styled.h2` color: #eee`;export default React.createClass({ contextTypes: { router: React.PRopTypes.object }, handleSubmit(event) { event.preventDefault() const name = event.target.elements[0].value const path = `/Three/${name}` this.context.router.push(path) }, render(){ return ( <div> <h2>hi i am three</h2> <ul> <NavLink to="/Three/haha">haha</NavLink><br></br> <NavLink to="/Three/heihei">heihei</NavLink><br></br> <form onSubmit={this.handleSubmit}> <input type="text" placeholder="name"/>{' '} <button type="submit">Go</button> </form> </ul> {this.props.children} </div> ) }})

我们来看下演示的效果

这里写图片描述