在reactjs中轉到之前的狀態

Question

我在根據用戶的選擇構建一個組件。我已經成功完成了它，但是在嘗試實現返回按鈕時遇到了一些問題。

我的代碼如下所示。

class ReportMainCat extends Component { 

    constructor(props) { 
     super(props); 

     this.state = { 

      postType: null, 

     } 

     this.changeType = this.changeType.bind(this); 
     this.report_next = this.report_next.bind(this); 

    }; 

    report_next() { 

     if (this.state.postType == null) { 

      return <ReportFirst changeType={this.changeType}/> 
     } 

     else if (this.state.postType === 'sexual') { 

      return <ReportXContent changeType={this.changeType}/> 

     } else if (this.state.postType === 'selfharm') { 

      return <ReportThreatContent changeType={this.changeType}/> 

     } 

    } 

    changeType = (postType) => { 

     this.setState({postType}) 

     this.setState({ 

      showMainReportCats: false, 

     }) 

    } 

    render() { 

     return (

      <div className="top_of_overlay"> 

       <div className="section_container text_align_center padding_10px"> 

        <a className="">Report Category</a> 

        {this.report_next()} 

       </div> 

      </div> 

     ) 

    } 
} 

我按如下方式綁定postType值。

class ReportXContent extends Component { 

    constructor(props) { 
     super(props); 

     this.state = { 

      postType: '', 

     } 

    }; 

    textType(postType) { 

     this.props.changeType(postType); 

    } 

    render() { 

     return (

      <div className="text_align_left"> 

       <div> 
        <div className="width_100 margin_bottom10px"> 
         <input type="checkbox" ref="nudity" onClick={this.textType.bind(this,'nudity')}/> 
         <a>Nudity or Pornography</a> 
        </div> 

        <div className="width_100 margin_bottom10px"> 
         <input type="checkbox" ref="minor" onClick={this.textType.bind(this,'minor')}/> 
         <a>Includes Minors</a> 
        </div> 

       </div> 

       <ReportButtons/> 

      </div> 

     ) 

    } 
} 

我後退按鈕

<div> 
<button className="float_right margin_left5px" onClick={this.props.back_report}>Back</button> 
</div> 

所以基本上我想要做的就是這個。例如：

例如：如果用戶選擇postType作爲sexual它將返回ReportXContent組件。當用戶點擊後退按鈕時，如何返回到第一頁。

謝謝。

Answer 1

您可以實現後退按鈕單擊處理這樣的ReportMainCat組件：

handleBackClick() { 
    this.setState({ postType: null }); 
} 

，這將再次顯示ReportFirst視圖。

如果你不想第一看法，但最後鑑於，只需改變你changeType實現節省lastPostType聲明是這樣的：

changeType = (postType) => { 
    this.setState({ 
    lastPostType: this.state.postType, 
    postType, 
    showMainReportCats: false, 
    }); 
} 

編輯

如果您想要完整的更改歷史記錄 - 假設您想要實現完整的後退按鈕歷史記錄 - 您可以簡單地將lastPostType重命名爲postTypeHistory a ND實現它就像一個堆棧（如瀏覽器歷史）：

changeType = (postType) => { 
    this.setState({ 
    postTypeHistory: [...this.state.postTypeHistory, this.state.postType], 
    postType, 
    showMainReportCats: false, 
    }); 
} 

handleBackClick() { 
    const { postTypeHistory } = this.state; 
    const postType = postTypeHistory.pop(); 
    this.setState({ 
    postType, 
    postTypeHistory, 
    }); 
}