Javascript 如何通过 clickHandlers 导航？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28250103/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to navigate via clickHandlers?
提问by phoenix
I just started learning React and I'm stuck in the following scenario.
我刚开始学习 React，我陷入了以下场景。
There is an input field and on clicking the search button it takes the input value and redirect to /search/search-query/some-action
有一个输入字段，单击搜索按钮时，它会获取输入值并重定向到 /search/search-query/some-action
I have setup the path, defined the route to the correct view. And, I was able to do hit this path using href links. But my actual requirement is to have a button and take user to this path via onClick handler.
我已经设置了路径，定义了到正确视图的路径。而且，我能够使用 href 链接访问这条路径。但我的实际要求是有一个按钮并通过 onClick 处理程序将用户带到此路径。
Searched a lot and found multiple (vague) solutions like, react-navigate-mixin etc. But I couldnt find any documentation around its usages.
搜索了很多并找到了多个（模糊的）解决方案，例如 react-navigate-mixin 等。但我找不到有关其用法的任何文档。
Can anyone point me in the right direction?
任何人都可以指出我正确的方向吗？
回答by Bogdan Dumitru
I'm gonna make the assumption that you're not building a single page app and using something along the lines of React router. And that what you need to do is simply navigate to a url based on the input.
我将假设您不是在构建单页应用程序并使用 React 路由器之类的东西。而您需要做的只是根据输入导航到一个 url。
There are two main ways of doing depending on wether you want to:
根据您的意愿，有两种主要方式：
- Style an
<a>as your button:
- 样式 an
<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>
);
}
});
This way you're keeping the query (value of the input) in the state. And whenever the input changes is automatically changes the href of the link.
通过这种方式，您可以将查询（输入的值）保持在状态中。每当输入更改时，链接的 href 都会自动更改。
- Use a
<button>and redirect programatically:
- 以
<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>
);
}
});
This way you handle the redirect programatically by setting your desired location to window.location.
通过这种方式，您可以通过将所需位置设置为以编程方式处理重定向window.location。
回答by Sean Smith
Adding on from the existing answer may need to bind your function like so:
从现有答案中添加可能需要像这样绑定您的函数：
constructor(props) {
super(props);
this.handleSearch = this.handleSearch.bind(this);
}
