Question

我刚刚开始学习React，我遇到了以下情况。

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

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

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

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

Answer 1

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

根据您的要求，有两种主要的做法：

将<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来以编程方式处理重定向。

Answer 2

从现有答案中添加可能需要绑定您的函数，如下所示：

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

如何通过clickHandlers导航？

2 个答案: