Реагируйте на перенаправление на другую страницу с помощью клавиши Enter, не обновляя страницу

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>

Я строю панель поиска с помощью кнопки поиска.Я пытаюсь перенаправить на другую страницу после того, как пользователь закончит ввод в строке поиска и нажмет кнопку поиска или «клавишу ввода».Redux сохраняет токен, введенный пользователем, чтобы на перенаправленной на него странице он мог вызывать API с этим токеном, сохраненным в Redux.

Проблема, с которой я сталкиваюсь сейчас, заключается в том, что когда я нажимаю «клавишу ввода» после того, как что-то наберу в строке поиска, она не перенаправляется на следующую страницу.Он отлично работает, когда я нажимаю кнопку поиска, так как я помещаю Navlink в тег кнопки.

Я попытался поместить

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

и

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

в метод onFormSubmit, чтобы заставить его перенаправить на следующую страницу, но он обновляет страницуи не держит данные в редукции.

Можно ли каким-либо образом перенаправить на другую страницу с помощью «клавиши ввода», сохраняя данные?Заранее спасибо.

Answer 1

Я полагаю, вы используете react-router-dom (потому что я вижу NavLink компонент из этого пакета).

Таким образом, вы на самом деле можете использовать this.props.history.push("/game_search") метод, но вы должны включитьРеагируйте на реквизиты Маршрутизатора в вашем компоненте SearchBar (или где-либо еще), используя HOC withRouter:

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

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

export default withRouter(SearchBar);

withRouter Компонент высшего порядка добавит оба реквизита history и match Маршрутизатора к переданному компоненту.