如何通过clickHandlers导航？

小编典典

如何通过clickHandlers导航？

reactjs

我刚刚开始学习React，并且陷入了以下情况。

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

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

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

谁能指出我正确的方向？

阅读 299

2020-07-22

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

以<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。

2020-07-22