如何通过clickHandlers导航？

Question

我刚刚开始学习React,我陷入了以下场景.

有一个输入字段,点击搜索按钮,它获取输入值并重定向到/ search/search-query/some-action

我已设置路径,将路径定义为正确的视图.并且,我能够使用href链接来实现此路径.但我的实际要求是有一个按钮,并通过onClick处理程序将用户带到此路径.

搜索了很多,发现了多个(模糊的)解决方案,例如react-navigate-mixin等.但我找不到任何关于其用法的文档.

谁能指出我正确的方向？

Answer 1

我会假设您没有构建单页应用程序并使用React路由器的内容.而您需要做的只是根据输入导航到URL.

根据您的需要,有两种主要的做法:

1. 样式<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.

2. 以<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.