如何使用反應恢復返回按鈕的狀態

如果我有一個簡單的反應組件，它記錄按鈕的點擊次數，並且每次點擊都記錄一個新的歷史記錄狀態而不更改url。當用戶點擊返回時，我該如何恢復狀態？如何使用反應恢復返回按鈕的狀態

我可以像使用本地JavaScript歷史記錄對象一樣在這裏執行操作，但當用戶轉換回第一個狀態並從不同組件返回到此狀態的最後一個狀態時，它會失敗。

我懷疑有更好的辦法使用react-router（1.0）來做到這一點嗎？

import React, { Component } from 'react'; 

export default class Foo extends Component { 
    state = { 
    clickCount: 0, 
    }; 

    componentWillMount() { 
    window.onpopstate = (event) => { 
     if (event.state.clickCount) { 
     this.setState({ clickCount: event.state.clickCount }); 
     } 
    }; 
    } 

    onClick() { 
    const newClickCount = this.state.clickCount + 1; 
    const newState = { clickCount: newClickCount }; 
    this.setState(newState); 
    history.pushState(newState, ''); 
    } 

    render() { 

    return (
     <div> 
     <button onClick={this.onClick.bind(this)}>Click me</button> 
     <div>Clicked {this.state.clickCount} times</div> 
     </div> 
    ); 
    } 
}

來源

2016-02-12 SystemicPlural

在react-router中籤出瀏覽器歷史記錄。 –

也許[這個答案]（http://stackoverflow.com/questions/29442206/how-to-pass-both-this-state-and-this-props-to-routes-using-react-router）幫助。 –

您可以將localStorage用於您的狀態。爲什麼不？ –

的localStorage甚至餅乾的選擇，但可能不是最好的辦法。您應該將計數存儲在數據庫中，這樣您可以將構造函數中的初始狀態設置爲保存在數據庫中的最後一個值。

另一種選擇是，如果您只需要在客戶端（而不是在數據庫中）持續計數，則使用閉包。

// CountStore.js 
var CountStore = (function() { 
    var count = 0; 

    var incrementCount = function() { 
    count += 1; 
    return count; 
    }; 

    var getCount = function() { 
    return count; 
    }; 

    return { 
    incrementCount: incrementCount, 
    getCount: getCount 
    } 

})(); 

export default CountStore;

所以你的代碼會變成下面的代碼。

import React, { Component } from 'react'; 
import CountStore from './CountStore'; 

export default class Foo extends Component { 
    state = { 
    clickCount: CountStore.getCount() 
    }; 

    componentWillMount() { 
    window.onpopstate = (event) => { 
     if (event.state.clickCount) { 
     this.setState({ clickCount: event.state.clickCount }); 
     } 
    }; 
    } 

    onClick() { 
    const newClickCount = CountStore.incrementCount(); 
    const newState = { clickCount: newClickCount }; 
    this.setState(newState); 
    } 

    render() { 

    return (
     <div> 
     <button onClick={this.onClick.bind(this)}>Click me</button> 
     <div>Clicked {this.state.clickCount} times</div> 
     </div> 
    ); 
    } 
}

使用react-router可能有更簡潔的方法，但這是一種選擇。

來源

2017-02-19 15:22:59 grizzthedj

如何使用反應恢復返回按鈕的狀態

回答

相關問題