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

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

尝试指定一种按钮：

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

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

在表单中添加.form-inline（不一定是<form>）...

没有刷新页面的ReactJS引导表单

1 个答案: