无需刷新页面的 ReactJS 引导程序表单

Question

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

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>

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

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