如何重新加载页面（状态）在一个反应​​的应用程序

Question

我开始学习react.js和我已经开发了一个简单的岩石纸剪刀游戏在一个反应​​的应用程序。我发现它有点困难，创造重载按钮，因为它当然是有相似的功能从JavaScript的按钮不同：

<button onclick="reload">RESTART GAME</button> 
function reload() { 
    location.reload(); 
} 

对于这种反应的应用程序是什么我想会的工作是：

<button type="button" onClick={ refreshPage }> <span>Reload</span> </button> 
function refreshPage(){ 
    window.location.reload(); 
} 

到App.js文件，但我得到的错误信息：

./src/App.js 
Syntax error: Unexpected token (64:11) 

    62 | } 
    63 | 
> 64 | function refreshPage(){ 
    |   ^
    65 |  window.location.reload(); 
    66 | } 
    67 | } 

完整的项目可以在这里github（NPM开始发现将启动终端项目/ C鞋垫）

任何洞察到如何纠正这将不胜感激，谢谢！

Answer 1

在反应中，您不必刷新页面以重置状态。我看着你的项目，看到你将分数和游戏数据保持在组件状态。只需将状态设置为初始值，这可以帮助您轻松重置游戏。

对于实例

// add a method to your component for resetting state 
restartGame(event) { 
    this.setState({ games: [] }); 
} 

// and in your components render or any other place add the reset button 
<button type="button" onClick={ this.restartGame.bind(this) }> 
    <span>Reload</span> 
</button> 

不要忘了你的绑定方法能在他们使用this。有关更多信息，请阅读Handling Events的反应文档。

Answer 2

查看下面的代码片段以找到更新页面的解决方法，以便重置游戏。

但是，这并不是最好的做法，因为React支持更改使（默认情况下）组件重新呈现的状态。 React具有称为虚拟DOM的概念。所以这个应用会非常快。因为React会通过比较差异来更新实际的DOM。

最好是改变状态作为其他答案建议。 this.setState({games:[]})

下面是解决方法（清爽页面）的代码片段

class App extends React.Component { 
 
    render() { 
 
     return (< button onClick = {this._refreshPage} > test </button>); 
 
     } 
 

 
     _refreshPage() { 
 
     console.log("Clicked"); 
 
     window.location.reload(); 
 
     } 
 
    } 
 

 

 
ReactDOM.render(< App/> , document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 

 
<div id="app"></div>

Answer 3

你真正想要的是重置状态，而不是重新加载页面。

通过单击处理程序

从错误信息来看调用this.setState({ games: [] })这是一个语法错误，最有可能的一个错字或类似的

Answer 4

的东西有两种方法来

• 任你可以通过重置状态
• 重置游戏中你可以重新加载网页并重置反应中的应用。

第二个有其道理，但有点昂贵的为好。

方式1 - 指的@bennygel答案

// add a method to your component for resetting state 
restartGame(event) { 
    this.setState({ games: [] }); 
} 

// and in your components render or any other place add the reset button 

<button type="button" onClick={ this.restartGame.bind(this) }> 
    <span>Reload</span> 
</button> 

方式2：指的@dwij答案