Question

我有一个带有导航栏组件的顶栏菜单，另一个组件包含一个带有文本输入的表单，该表单更改了导航的父组件应用程序组件的状态。 Nav位于路由器外部，它具有更改路由的链接。

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并导航到搜索输入，这会更改应用程序状态。我需要在提交表单时将路由重定向到名为'/ search'的新路由，但我无法通过react-routing的重定向重定向到搜索。

以下是App组件和SearchBar组件：

APP：

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很新，对不起，如果我问的话真的很蠢。提前谢谢。

Answer 1

嗯，我并不了解您的确切业务问题。但似乎您需要在表单提交时进行一些程序化导航。你需要做的是通过传递一个负责编程导航的回调函数来调用动作创建者。然后，一旦承诺得到解决，在动作创建者内部，只需调用回调函数来进行导航。下面给出一个例子。

这是表单提交功能。

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

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

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

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

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

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

1 个答案: