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

Question

react我正在编写一个使用路由的客户端渲染 Web 应用程序react-router。input我已经实现了 a inside a formwith的搜索react-bootstrap。

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按预期执行搜索：按 Enter 键并单击将searchButton我路由到客户端呈现的页面.../#/search/...。

执行搜索的Google Chrome行为如下：单击searchButton上面的工作（客户端渲染），但按 Enter 键会导致服务器重定向.../?#/search...。

我发现这是由表单的submit属性引起的，我该如何修改它以在客户端上呈现？

我正在考虑听键盘 ascii 代码（输入）来执行搜索，但这似乎有点混乱。

Answer 1

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

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

只需在您的函数中接受该事件即可executeSearch。

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