在React中单击后退按钮时触发事件操作

时间:2017-08-03 17:48:39

标签: reactjs back-button browser-history

我有以下组件

class NewCampaign extends Component {
  constructor(props) {
    super(props)
    this.nextStep = this.nextStep.bind(this)
    this.previousStep = this.previousStep.bind(this)

    this.state = {
      page: 1,
    }
  }  

  nextStep() {
      var newStep = this.state.step +1;
       this.setState({ page: newStep })
  }

  previousStep() {  
      var newStep = this.state.step -1;
      this.setState({ page: newStep })
  }


  render() {
    return (
        <div className="campaign">
          {page === 1 && <Step1Page nextStep={this.nextStep}/>}
          {page === 2 && <Step2Page previousStep={this.previousStep} nextStep={this.nextStep}/>}
          {page === 5 && <Step5Page previousStep={this.previousStep} />}                              
      </div>

    )
  }
}

目前,每个组件步骤页面都有2个按钮:一个上一个按钮和一个下一个按钮,单击该按钮将更新名为页面的状态。

这很好用。但是,现在有一个请求允许浏览器上的Back Button转到上一步。

我不确定我是否可以使用browser history,因为我仍然在同一条路线上。唯一改变的是名为page的组件状态,它由nextStep和PreviousStep这两个动作触发。

有没有办法找出点击后退按钮的时间并激活previousStep操作?

0 个答案:

没有答案