如何通过 clickHandlers 导航？

Question

我刚开始学习React，遇到了下面的场景。

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

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

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

谁能给我指出正确的方向？

Answer 1

我假设您不是在构建单页应用程序，而是在使用 React 路由器之类的东西。而您需要做的只是根据输入导航到 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>
    );
  }
});

这样您就可以将查询（输入的值）保持在状态中。并且每当输入改变时自动改变link.

的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 导航？

How to navigate via clickHandlers?

javascript

reactjs