나는이 타이머의 운동 반응 내 타이머를 재설정하여 문제를 가지고 button.I하여 다시 해결해야

아자 :

나는 리셋 버튼과 타이머를 만들려고합니다. 나는 반작용에 의해 기록되는 초기 코드에서이 운동을해야합니다. 이것은 초기 코드입니다.

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

export class Timer extends Component {
    render() {
        return <div className="container">
            <div className="timer">
            </div>
            <button>Reset Timer</button>
        </div>;
    }
}

나는 두 가지 솔루션을 시도했지만 그들 각각은 서로 다른 오류를 반환했습니다. 여기에 내 첫 번째 솔루션이다. (그림 1) 그림 1

및 에러 (도 2)는 도 2

내 두 번째 솔루션은이 ... (그림 3)은 그림 3

import React, {Component} from 'react';
import './Timer.css';
const initialState = {
    seconds: 0
  }

export class Timer extends Component {
    constructor(props) {
        super(props);
        this.state = initialState;
      }
       
      tick() {
        this.setState(state => ({
          seconds: state.seconds + 1
        }));
      }

      componentDidMount() {
        this.interval = setInterval(() => this.tick(), 1000);
      }
    
      componentWillUnmount() {
        clearInterval(this.interval);
      }
      
     resetTimer() {
                this.setState(initialState);
        }
    
    render() {
        return <div className="container">
            <div className="timer">
                {this.state.seconds}
            </div>
            <button onClick = {this.resetTimer}>Reset Timer</button>
        </div>;
    }
}

그 오차는 (도 4)는 도 4

어떻게 타이머를 재설정 문제를 해결할 수 있습니까?

Reda.a :

문제는 "이"범위에서 온다.

어느 쪽이든 당신은 당신이 수업 시간에 사용하고있는 기능을 결합해야합니다.

constructor( props ){
   super( props );
   this.resetTimer = this.resetTimer.bind(this);
}

두 번째 옵션은 "이"에 대한 클래스의 범위를 유지하기 위해 귀하의 함수를 선언 할 때 기능 화살표를 사용하는 것입니다.

resetTimer = () => {
   this.setState(initialState);
}