如何在不重定向的情况下提交HTML表单?

时间:2016-01-30 17:59:38

标签: javascript html forms reactjs react-router

我正在编写一个使用reactreact-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代码(输入)来执行搜索,但它看起来有点乱。

1 个答案:

答案 0 :(得分:1)

使用event.preventDefault()停止表单提交的默认行为。

这会阻止浏览器提交您的表单,而是将“路由”逻辑留给您执行您想要的操作。

只需接受executeSearch功能中的活动。

executeSearch(event){
    ...
    event.preventDefault();
    window.location.href = '/#/search/' + formattedURL;
}