react-router 4.3 js实现跳转

import React, {Component} from 'react';
import { NavLink,Link } from "react-router-dom";
import './index.less';
import PropTypes from 'prop-types'; //这里是重点

import logo from '../../images/hyzklogo.png';
import logoName from '../../images/logo_name.png';

export default class Header extends Component {
    static contextTypes = {   //这里是重点
        router: PropTypes.object.isRequired,
    }
    constructor(props) {
        super(props);
        this.state = {
            keyword:""
        };
        this.handleToSearch=this.handleToSearch.bind(this);
        this.handleChange=this.handleChange.bind(this);
    }
    handleChange(event) {
        this.setState({keyword: event.target.value});
    }
    handleToSearch() {       this.context.router.history.push(`/news_list/search/${this.state.keyword}`)  //这里是重点,实现跳转
    }
    render() {
        return (
               <div className="wrapper">
                   <div className="header">
                       <div className="logo-bar">
                           <div className="container">
                               <Link to="/index"><img src={logo} alt="智库logo" className="logo" /></Link>
                               <Link to="/index"><img src={logoName} alt="智库" className="logo-name" /></Link>
                               <div className="search-bar">
                                   <input type="text" placeholder="搜索感兴趣的军事资讯" value={this.state.keyword} onChange={this.handleChange}/>
                                   <div onClick={this.handleToSearch}>
                                       <i className="iconfont icon-sousuo"></i>
                                   </div>
                               </div>
                           </div>
                       </div>
                       <div className="header-bar">
                           <div className="container">
                               <ul>
                                   <li>
                                       <NavLink to="/" exact activeClassName="nav-active">首页</NavLink>
                                   </li>
                                   <li>
                                       <NavLink to="/intro" activeClassName="nav-active">智库概况</NavLink>
                                   </li>
                                   <li>
                                       <NavLink to="/professor_list" activeClassName="nav-active">专家团队</NavLink>
                                   </li>
                               </ul>
                           </div>
                       </div>
                   </div>
               </div>
        );
    }
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端说吧

JS-匀速运动-运动停止

30240
来自专栏ytkah

3个技巧快速入门微信文章排版

  编辑微信图文消息,我们有时会先保存在word文档中,或者是企划部给你的新闻稿,里面有不同的字体(大小)、格式,如果我们直接Ctrl+c/v,那么领导很快会找...

32950
来自专栏進无尽的文章

多媒体-图片、音频、视频的基本实现

AVFoundation的录音和播放 音频的录制与播放主要和三个类有关AVAudioSession,AVAudioRecorder,AVAudioPlayer...

9910
来自专栏BestSDK

一件交互设计大事,确定按钮放在左还是右?

其实这个问题,连世界最大的IT公司都没有确切的答案。 苹果说,不论移动或电脑设备,行动按钮(Action button)都放在右边,也就是说*确定按钮放在右边...

45670
来自专栏谈补锅

机试题:地图定位、拍照并显示、录制视频并播放

  这两天参加面试,有个公司先出了机试题,然后才能进入下一步,机试题大意是要求实现:地图定位、拍照并显示照片、录制视频并且播放视频三个小功能。

17240
来自专栏Golang语言社区

【Golang语言社区】游戏编程--js开发实现简单贪吃蛇游戏(20行代码)

曾经诺基亚的贪吃蛇风靡一时,在游戏匮乏的年代,用Java实现太难,现在网页制作20行代码就做成一个简单的demo了,时代在进步啊 代码: <!doctype h...

41870
来自专栏iOS开发攻城狮的集散地

iOS 传感器集锦

连续三次指纹识别错误后,会自动弹出密码框,通过Touch ID的密码进行身份验证,如果此时取消密码验证,再2次指纹识别失败后,也就是 3 + 2 = 5次指纹识...

27880
来自专栏程序你好

11种最佳编程字体中的哪款适合你?

86820
来自专栏天天

vue中的一些小坑(3)

在开发中模拟数据,实现接口,主要是在webpack.dev.conf.js中配置代理

16540
来自专栏hightopo

矢量化的HTML5拓扑图形组件设计

23720

扫码关注云+社区

领取腾讯云代金券