zoukankan      html  css  js  c++  java
  • 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>
            );
        }
    }
  • 相关阅读:
    ShellExecuteEx 函数说明
    npm
    Byte和char
    如何高效阅读一个项目
    C++中慎用malloc
    #ifdef
    string
    C++与C混合编译
    git@github.com: Permission denied (publickey).
    connect to host github.com port 22: Connection refused
  • 原文地址:https://www.cnblogs.com/beileixinqing/p/9396415.html
Copyright © 2011-2022 走看看