我刚刚开始学习 React，但我陷入了以下场景。
有一个输入字段，单击搜索按钮时，它会获取输入值并重定向到 /search/search-query/some-action
我已经设置了路径，定义了到正确视图的路径。而且，我能够使用 href 链接访问这条路径。但我的实际要求是有一个按钮并通过 onClick 处理程序将用户带到此路径。
搜索了很多并找到了多个（模糊的）解决方案，例如 react-navigate-mixin 等。但我找不到有关其用法的任何文档。
任何人都可以指出我正确的方向吗？
我将假设您不是在构建单页应用程序并使用 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>
);
}
});
通过这种方式，您可以将查询（输入的值）保持在状态中。每当输入更改时，链接的 href 都会自动更改。
<button>编程方式使用 a和重定向：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。
从现有答案中添加可能需要像这样绑定您的函数：
constructor(props) {
super(props);
this.handleSearch = this.handleSearch.bind(this);
}