Question

我正在使用react 16和react-router v4构建一个Web应用程序。我的应用有这样的index.js -

import React from "react";
import ReactDOM from "react-dom";        
import App from "./components/App";
import Bootstrap from "bootstrap/dist/css/bootstrap.css";        
import 'font-awesome/css/font-awesome.min.css';
import "../assets/css/clean-blog.css";  
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter> , 
    document.getElementById('app')
);

我的App.js看起来像这样 -

"use strict";

import React              from "react";
import Header             from "./layout/header";
import Body               from "./layout/body";
import Footer             from "./layout/footer";

class App extends React.Component {

  render() {
      return (
           <div>
             <Header />
             <Body /> 
             <Footer />
           </div>  
      );
  }

};

export default App;

在我的Header组件中，我有一个搜索框，我希望当用户点击seacrh提交按钮时，它们应该被重定向到/ seacrh url。我设法得到了。请查看handleSubmit函数

"use strict";

import React from "react";
import { Link } from 'react-router-dom';
import Notifications, {notify} from 'react-notify-toast';
import { withRouter } from 'react-router-dom';

class Header extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            searchTerm:''
        };    
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event) {
        this.setState({searchTerm: event.target.value});
    }

    handleSubmit(event) {
        event.preventDefault();
        //console.log(this.props);
        //console.log(this.state.searchTerm);
        this.props.history.replace({
            pathname:'/search',
            searchTerm:this.state.searchTerm
        });

    }

    render() {
        return (
            <nav className="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
                <div className="container">
                    <Link to='/'>My Library</Link>
                    <button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                    Menu
                    <i className="fa fa-bars"></i>
                    </button>
                    <div className="collapse navbar-collapse" id="navbarResponsive">
                        <ul className="navbar-nav ml-auto">
                            <li className="nav-item">
                                <Link to='/'>Home</Link>
                            </li>
                            <li className="nav-item">
                                <Link to='/authors'>Authors</Link>
                            </li>
                            <li className="nav-item">
                                <Link to='/books'>Books</Link>
                            </li>
                        </ul>
                        <form className="form-inline my-2 my-lg-0" onSubmit={this.handleSubmit} type="post">
                            <input className="form-control mr-sm-2" type="text" placeholder="Search" onChange={this.handleChange} name="searchTerm"/>
                            <button className="btn btn-outline-secondary btn-md " type="submit">Search</button>
                        </form>
                    </div>
                </div>
            </nav>    

        );
    }



};

export default withRouter(Header);

这适用于所有网址，除非我尝试从/搜索网址提交时没有任何反应。我的意思是调用handleSubmit函数，但它不会触发重定向调用。

我很反应，想要了解我应该如何处理这个问题。

了解React浏览器历史记录

0 个答案: