我正在编写一个使用react
和react-router
进行路由的客户端呈现Web应用程序。我已使用input
form
内的react-bootstrap
实施了搜索{/ 1}}。
executeSearch(){
...
window.location.href = '/#/search/' + formattedURL
}
let formSettings = {
onSubmit:this.executeSearch.bind(this),
id:"xnavbar-form"
}
const searchButton =
<Button
onClick={this.executeSearch.bind(this)}>
<Glyphicon glyph="search" />
</Button>
const searchInput =
<form>
<Input
type="text"
ref="searchInput"
buttonAfter={searchButton}
placeholder="search"/>
</form>
... Jumping to the render function
<Navbar.Form
{...formSettings}>
{searchInput}
</Navbar.Form>
在Mozilla Firefox
中执行搜索按预期工作:点击回车键并点击searchButton
将我转到客户端呈现的页面.../#/search/...
。
在Google Chrome
中执行搜索的行为如下:单击searchButton
的工作方式如上(客户端渲染),但点击回车键会导致服务器重定向.../?#/search...
。
我发现它是由表单的submit
属性引起的,如何修改它以在客户端上呈现?
我正在考虑使用键盘ascii代码(输入)来执行搜索,但它看起来有点乱。
答案 0 :(得分:1)
使用event.preventDefault()
停止表单提交的默认行为。
这会阻止浏览器提交您的表单,而是将“路由”逻辑留给您执行您想要的操作。
只需接受executeSearch
功能中的活动。
executeSearch(event){
...
event.preventDefault();
window.location.href = '/#/search/' + formattedURL;
}