ReactJS引导表单，无需刷新页面

Question

我的基本React应用程序中有一个表单，我想让用户输入文本并通过更新状态创建用户名。 但是，单击“确定”按钮后，创建的用户名会在页面上显示约半秒钟，然后页面会自动刷新并恢复默认状态。 仅当按钮包含在表单元素中时才会发生。 删除form元素时，它工作正常并且页面不会刷新，但是我不想牺牲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

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

请尝试指定按钮的类型：

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

另外，如果您不需要特殊的form元素，则可以尝试将其更改为<div> 。 引导form-inline样式不需要表单，如文档中 “内联表单”标题下所述：

将.form-inline添加到您的表单（不必是<form> ）...