Question

constructor(props){
    super(props);
    this.state = { term: '' };
    this.onInputChange = this.onInputChange.bind(this);
    this.onFormSubmit = this.onFormSubmit.bind(this);
}

onInputChange(event){
    this.setState({term: event.target.value});
    this.props.handle_search(event.target.value)
}

onFormSubmit(event){
    event.preventDefault();
    this.setState({ term: '' });
}

<form onSubmit={this.onFormSubmit} className="input-group">
    <input
        placeholder="Search games..."
        className="form-control"
        value={this.state.term}
        onChange={this.onInputChange}
   />
   <span className="input-group-btn">
       <button type="submit" className="btn btn-secondary"> 
          <NavLink to='/game_search' style={{ textDecoration: 'none' }}> Search </NavLink>
       </button>
   </span>
</form>

我正在构建带有搜索按钮的搜索栏。用户尝试在搜索栏中输入内容并按搜索按钮或“ Enter键”后，我试图重定向到另一个页面。 Redux会保留用户键入的令牌，以便它重定向到它的页面上可以使用Redux中存储的令牌调用API。

我现在遇到的问题是，当我在搜索栏中键入内容后按“ Enter键”时，它不会重定向到下一页。当我单击搜索按钮时，由于将Navlink放置在button标签中，因此它可以很好地工作。

我尝试放

this.props.history.push("/game_search")  //game search is the page it redirects to

和

window.open("/game_search");
window.location.href("/game_search");

进入onFormSubmit方法以强制其重定向到下一页，但它刷新页面并且不将数据保留在redux中。

在保留数据的同时，有什么方法可以使用“ Enter键”重定向到另一页？预先感谢。

Answer 1

我猜您正在使用react-router-dom（因为我从该软件包中看到了NavLink组件）。

因此，您实际上可以使用this.props.history.push("/game_search")方法，但必须使用HOC withRouter将React Router的props包含在SearchBar（或任何其他组件）中：

import { withRouter } from 'react-router-dom';

class SearchBar extends React.Component { .... }

export default withRouter(SearchBar);

withRouter高阶组件会将history和match路由器的道具添加到传递的组件中。

使用Enter键将重定向重定向到另一个页面，而无需刷新页面

1 个答案: