ReactJS引導窗體沒有刷新頁面

我在我非常基本的React應用程序中有一個窗體，我希望允許用戶通過更新狀態輸入文本並創建他們的用戶名。但是，當單擊「確定」按鈕時，創建的用戶名將在頁面上出現約半秒，然後該頁面將自動刷新並恢復默認狀態。只有當按鈕包含在表單元素中時纔會發生。它工作正常，並且當我刪除表單元素時頁面不刷新，但是我不想犧牲引導表單的樣式和格式。這裏是我的渲染方法：ReactJS引導窗體沒有刷新頁面

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> 
) 
}

來源

2016-11-29 Jackson Lenhart

您的按鈕沒有一個類型的屬性，所以默認將被提交（見this page）。這意味着當你點擊你的按鈕時，onClick處理程序將被調用，但提交表單的默認瀏覽器動作也會發生。

嘗試指定類型的按鈕，而不是：

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

另外，如果你沒有特別需要的表單元素，你可以嘗試將其更改爲一個<div>。自舉form-inline風格不需要形式，如內聯形式的標題下的documentation提到：

添加.FORM直插到表單（這並不一定是一個<form>）...

來源

2016-11-29 19:45:18

ReactJS引導窗體沒有刷新頁面

回答

相關問題