React: Как перемещаться через clickHandlers?

Я только начал изучать React, и я застрял в следующем сценарии.

Существует поле ввода и при нажатии кнопки поиска оно принимает входное значение и перенаправляет на /search/search -query/some-action

Я установил путь, определил маршрут к правильному виду. И я смог сделать этот путь, используя ссылки href. Но мое фактическое требование состоит в том, чтобы иметь кнопку и принимать пользователя на этот путь с помощью обработчика onClick.

Искал много и нашел несколько (расплывчатых) решений, таких как реакция-navigate-mixin и т.д. Но я не мог найти никакой документации по ее использованию.

Может ли кто-нибудь указать мне в правильном направлении?

Ответы

Ответ 1

Я сделаю предположение, что вы не создаете одностраничное приложение и не используете что-то вдоль линий React router. И то, что вам нужно сделать, это просто перейти к URL-адресу на основе ввода.

Существует два основных способа работы в зависимости от того, на какой вы хотите:

  • Стиль <a> в качестве кнопки:
var Component = React.createClass({
  getInitialState: function() { return {query: ''} },
  queryChange: function(evt) {
    this.setState({query: evt.target.value});
  },
  _buildLinkHref: function() {
    return '/search/'+this.state.query+'/some-action';
  },
  render: function() {
    return (
      <div className="component-wrapper">
        <input type="text" value={this.state.query} />
        <a href={this._buildLinkHref()} className="button">
          Search
        </a>
      </div>
    );
  }
});

Таким образом, вы сохраняете запрос (значение ввода) в состоянии. И всякий раз, когда изменения ввода автоматически изменяют href ссылки.

  1. Используйте <button> и перенаправляйте программно:
var Component = React.createClass({
  getInitialState: function() { return {query: ''} },
  queryChange: function(evt) {
    this.setState({query: evt.target.value});
  },
  handleSearch: function() {
    window.location = '/search/'+this.state.query+'/some-action';
  },
  render: function() {
    return (
      <div className="component-wrapper">
        <input type="text" value={this.state.query} />
        <button onClick={this.handleSearch()} className="button">
          Search
        </button>
      </div>
    );
  }
});

Таким образом вы обрабатываете перенаправление программно, установив желаемое местоположение в window.location.

Ответ 2

Добавление из существующего ответа может потребоваться связать вашу функцию следующим образом:

constructor(props) {
    super(props);
    this.handleSearch = this.handleSearch.bind(this);
}