javascript - React 类方法外的函数未定义

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 中使用类的奇怪之处。我建议浏览 handling events portion React 文档。在你的构造函数中，你应该绑定(bind)你的事件处理程序:

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

然后您应该能够成功引用 this.breakValueBegins()。

使用类时的这种混淆是 React 中新的(目前仅处于测试阶段)钩子(Hook)特性背后的原因之一，该特性允许避免基于类的组件。