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

Question

我正在编写一个使用 react 和 react-router 进行路由的客户端渲染 Web 应用程序。我已经在 form 和 react-bootstrap.

中使用 input 进行了搜索

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 码 (enter) 来执行搜索，但它似乎有点乱。

Answer 1

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

这将阻止浏览器提交您的表单，而是将 "routing" 逻辑留给您去做您想做的事。

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

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