ReactJS bootstrap 表单不刷新页面

Question

我在非常基本的 React 应用程序中有一个表单，我希望允许用户在其中输入文本并通过更新状态来创建用户名。但是当点击 "OK" 按钮时，创建的用户名会在页面上出现大约半秒，然后页面自动刷新并恢复默认状态。只有当按钮包含在表单元素中时才会发生。它工作正常，当我删除表单元素时页面不会刷新，但是我不想牺牲 bootstrap 表单的样式和格式。这是我的渲染方法：

render() {
   return (
     <div class="container-fluid text-center">
        <form class="form-inline">
          <input type="text" class="form-control" placeholder="UserName"/>
          <button onClick={this.createUser.bind(this)} class="btn btn-primary">OK</button>
        </form>
      <h1>User: {this.state.userName}</h1>
      <h1>Points: {this.state.points}</h1>
    </div>
  )
}

Answer 1

您的按钮没有类型属性，因此默认为提交（请参阅 this page）。这意味着当您单击按钮时，将调用 onClick 处理程序，但提交表单的默认浏览器操作也会发生。

尝试指定一种按钮类型：

<button type="button" onClick={this.createUser.bind(this)} class="btn btn-primary">OK</button>

此外，如果您不是特别需要表单元素，您可以尝试将其更改为 <div>。 bootstrap form-inline 样式不需要表单，如 documentation 内联表单标题下所述：

Add .form-inline to your form (which doesn't have to be a <form>)...

ReactJS bootstrap 表单不刷新页面

ReactJS bootstrap form without refreshing page

html

javascript

forms

state

reactjs