Question

我不断得到未定义第一个函数（breakValueBegins）的信息。为什么会这样？（我很确定它应该在handleTimer的范围内）。我基本上希望此功能在计时器达到零时运行。

class Clock extends Component {
  constructor(props) {
    super(props);
    this.state ={
    breakSession:5,
    session:25,
    timer: 1500,
    isPaused:true,
    breakValue:300
}
this.handleTimer=this.handleTimer.bind(this);
}


breakValueBegins(){
let timer=this.state.timer;
this.Interval=setInterval(() => { 
         this.setState({
            breakValue: this.state.breakValue - 1, isPaused:false
          })},1000)
}

 handleTimer(evt){
      const id=evt.target.id;
      let isPaused=this.state.isPaused;
      clearInterval(this.Interval)
      this.Interval=setInterval(() => { 
        let timer=this.state.timer;
        if(timer > 0){
          this.setState({
            timer: this.state.timer - 1, isPaused:false
          })
        }if(id==="reset"){
     clearInterval(this.Interval);
     this.setState((state) => ({
      session: 25, timer:1500, breakSession:5, isPaused:true}))
        }
        if(!isPaused){
          clearInterval(this.Interval);
      this.setState((state) => ({
      isPaused:true}))
      }
if(timer===0){
breakBegins()
}},1000)}

Answer 1

我假设这些方法是您的代码中未显示的组件类的一部分。这在JavaScript中使用类变得很奇怪。我建议仔细阅读React文档的handling events portion。在构造函数中，应绑定事件处理程序：

this.handleTimer = this.handleTimer.bind(this);

，那么您应该能够成功引用this.breakValueBegins()。

使用类时出现这种混乱，是React中新的（仅现在是alpha）钩子功能背后的原因之一，该功能允许避免基于类的组件。

React类方法外的函数未定义

1 个答案: