使用 React-Router 提交输入值时更改路由答案

【问题标题】：Change route when submitting input value with React-Router使用 React-Router 提交输入值时更改路由
【发布时间】：2017-10-05 01:24:20
【问题描述】：

我有一个顶部栏菜单，其中包含一个导航栏组件和另一个组件，该组件包含在一个带有文本输入的表单上，该文本输入将应用程序组件的状态更改为导航的父级。 Nav 在路由器之外，它具有更改路由的链接。

资产净值：

import React from 'react';
import {NavLink} from 'react-router-dom';
import SearchInput from './search-input';

var Nav = (props) =>{
	return(

			<nav className="top-bar main-navigation">
				<div className="top-bar-left">
				<ul className="menu">
					<li>
						<NavLink className='logoText' exact to='/'>
							some text
						</NavLink>
					</li>
					<li>
						<SearchInput search={props.executeSearch}/>
					</li>
				</ul>
				</div>
			</nav>
	)
}

export default Nav;

父组件将一个函数传递给 nav 并将 nav 传递给 search-input，这会改变应用程序的状态。提交表单时，我需要将路由重定向到一个名为“/search”的新路由，但我无法通过 Redirect from react-router 重定向到搜索。

这里是 App 组件和 SearchBar 组件：

应用程序：

import React,{Component} from 'react'
import ReactRouter, {BrowserRouter, Route, Switch, Redirect} from 'react-router-dom';
var Router = BrowserRouter;


import api from '../api/api';

import Nav from './nav';
import GameView from './main-view';
import Home from'./home';
import Search from './search';



class App extends Component {
  constructor(props){
    super(props);
    this.state={
      searchResult:null,
      redirect:false
    }
    this.search= this.search.bind(this);
  }

  search(term,type){
    api.searchElements(term,type)
      .then((searchResult)=>{
        console.log(searchResult);
        this.setState({searchResult});
      })
      .catch((e)=>{
        console.log(e);
      })
  }

  render() {


    return (
      <Router>
        <div>
          <Nav executeSearch={this.search}/>
          <Switch>

            <Route exact path='/' component={Home}/>
            <Route path='/main' component={MainView}/>
            <Route path='/search' component={Search}/>

          </Switch>
        </div>
      </Router>
    )
  }
  componentDidMount() {
    document.title = 'My page';
  }
}

module.exports = App;

import React, {Component} from 'react';
import ReactRouter, {Redirect} from 'react-router-dom';

import api from '../api/api';

export default class SearchInput extends Component{
	constructor(props){
		super(props);

		this.state = {
			term: null
		}
	}
	onInputTerm(term){
		this.setState({term});
	}
	onSumbitTerm(term){
		this.props.search(term,'games');
	}
	render(){
		return(
				<div className='search-bar' >
					<form
						onSubmit={(e)=>{
								e.preventDefault();
								this.onSumbitTerm(e.target.searchValue.value);
							}}
					>
						<input 
							name='searchValue'
							type='text'
							onChange={(e)=>{this.onInputTerm(e.target.value)}} 
						/>
					</form>
				</div>
			);
	}
}

我对 React 还很陌生，如果我问了一些非常愚蠢的问题，对不起。提前致谢。

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

嗯，我不明白您的具体业务问题。但似乎您需要在提交表单时进行一些编程导航。您需要在这里做的是通过传递一个负责编程导航的回调函数来调用动作创建者。然后，一旦 promise 被解决，在 action creator 内部，只需调用回调函数来进行导航。下面给出一个例子。

这是表单提交功能。

  onSubmit(values) {
    this.props.createPost(values, () => {
      this.props.history.push('/');
    });
  }

当 Promise 被解析为导航到不同的 url 时，这是调用传递给它的回调函数的动作创建者。

export function createPost(values, callback) {
  const request = axios.post(`${ROOT_URL}/posts`, values)
    .then(() => callback());

  return {
    type: CREATE_POST,
    payload: request
  };
}

希望这会有所帮助。快乐编码！

【讨论】：