javascript - 如何通过 clickHandler 进行导航？

Question

我刚刚开始学习 React，我陷入了以下场景。

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

我已经设置了路径，定义了到正确 View 的路线。而且，我能够使用 href 链接找到这条路径。但我的实际要求是有一个按钮并通过 onClick 处理程序将用户带到此路径。

搜索了很多并找到了多个(模糊的)解决方案，例如react-navigate-mixin等。但我找不到有关其用法的任何文档。

有人能指出我正确的方向吗？

Answer 1

我将假设您没有构建单页应用程序并使用类似 React 路由器的东西。您需要做的只是根据输入导航到一个网址。

根据您的意愿，有两种主要的方法:

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 都会自动更改。

使用 <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 以编程方式处理重定向。 .