_this3 함수가 아닙니다. (React)

Question

사용자가 두 번 입력하고 두 초 사이에 카운트 다운하는 간단한 카운트 다운 구성 요소가 있습니다. 시작, 중지 및 재설정 작업. 내가 (페이지 새로 고침없이) 카운트 다운과 입력이 새로운 시간을 재설정 할 때, 나는이 오류와 함께 공격하고있다 제외 :

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

class App extends Component { 
    constructor(){ 
    super(); 
    this.start = this.start.bind(this); 
    this.toTimestamp = this.toTimestamp.bind(this); 
    this.getDifference = this.getDifference.bind(this); 

    this.state = { 
     input1: '', 
     input2: '', 
     countdown: null 
    } 
    } 


input1ContentChange(e){ 
    const text = e.target.value; 
    this.setState(()=>{ 
    return {input1: text}; 
    }) 
} 

input2ContentChange(e){ 
    const text = e.target.value; 
    this.setState(()=>{ 
    return {input2: text}; 
    }) 
} 


toTimestamp(input){ 
    let time = input.split(':'); 
    let seconds = ((+time[0]) * 60 * 60) + ((+time[1]) * 60) + (+time[2]); 

    return seconds; 
} 

getDifference(input1, input2){ 
    let difference = (this.toTimestamp(input2))- (this.toTimestamp(input1)); 

    if(this.toTimestamp(input2) < this.toTimestamp(input1)){ 
    alert("please input a later time in Time 2"); 
    } 

    this.setState({ 
    countdown: difference 
    }) 
} 


start() { 
    if(this.state.input1 === '' && this.state.input2 === ''){ 
    alert('please choose 2 times'); 
    } 
    this.getDifference(this.state.input1, this.state.input2); 
    this.start = setInterval((e) => { 
    this.setState((prevState) => { 
     return {countdown: prevState.countdown - 1}; 
    }); 
     if(this.state.countdown <= 0){ 
     clearInterval(this.start); 
     } 
    }, 1000); 

} 

stop(){ 
    clearInterval(this.start); 
} 

reset(){ 
    clearInterval(this.start); 
    this.setState((prevState) => { 
    return {countdown: null, input1: '', input2:''} 
    }) 
} 

    render() { 
    return (
     <div className="App"> 
     <h1>Countdown Timer</h1> 
     <p>Please choose two different times below</p> 
      <div className="input1"> 
       <label> 
       Time 1: 
       <input type="time" 
        step="1" 
        min= "12:00" 
        max= "18:00" 
        value={this.state.input1} 
        onChange={(e)=> this.input1ContentChange(e)}/> 
       </label> 
      </div> 
      <div className="input2"> 
       <label> 
       Time 2: 
       <input type="time" 
        step="1" 
        min="12:00" 
        max="18:00" 
        value={this.state.input2} 
        onChange={(e)=> this.input2ContentChange(e)}/> 
       </label> 
      </div> 
      <button onClick={(e) => this.start()}>Start</button> 
      <button onClick={(e) => this.stop()}>Stop</button> 
      <button onClick={(e) => this.reset()}>Reset</button> 
      <h3>{this.state.countdown}</h3> 
     </div> 
    ); 
    } 
} 

export default App; 

: 아래

> 108 | <button onClick={(e) => this.start()}>Start</button>

TypeError: _this3.start is not a function

내 코드입니다

카운트 다운을 다시 시작하기위한 시작 기능에서 오류가 발생했습니다. React 확장 기능을 사용하여 크롬 도구를 체크인하면 상태가 잘 관리됩니다. "이"가 없어지고있는 것 같습니다.

Answer 1

클래스 기능을 수정 중입니다.

this.start = setInterval(...) 

setInterval

함수를 반환하지 않습니다,하지만 당신은 간격을 취소 나중에 사용할 수있는 id : 앱로드, 클래스가 start 방법이 있지만 때 그 방법 안에 당신이 할. 함수를 반환 했더라도 런타임에 클래스 메서드를 수정하고 싶지는 않을 것입니다.

내가 다른 변수 이름을 사용하는 것이 좋습니다 것

:

this.intervalId = setInterval(...)