我应该解决一个计时器的 React 练习并通过按钮重置它。我在重置我的计时器时遇到问题

Question

I want to create a timer with a reset button. I must do this exercise in an initial code that is written by React. This is the initial code.

 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>; } }

I've tried two solution but each of them returned different error. Here is my first solution.(figure 1) figure 1

and the error is (figure 2) figure 2

and my second solution is this ... (figure 3) figure 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>; } }

and its error is that ... (figure 4) figure 4

How can I solve the problem of resetting the timer?

Answer 1

The problem comes from the "this" scope.

Either you have to bind the function you're using in the class.

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

A second option is to use arrow functions when you declare your functions in order to maintain the scope of "this" on the class.

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

Answer 2

instead of writing

`resetTimer() {
    this.setState(initialState);
    }`

use arrow function

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

this will work

Answer 3

second Solution - this is because you have not bind the function and calling it in the click event Please refer Handling events

So add this line inside the constructor

this.resetTimer = this.resetTimer.bind();

I hope this solves your problem :)

Answer 4

You have to bind the method call with the event as suggested by other users If you don't bind the method, It will be always be called with the re-render

First approach

Inside constructor this.methodName = this.bind.methodName(this);

Inside render()

render(){
return(
<button onClick={this.methodName}></button>
)
}

Second approach

render(){
 return(
  <button onClick={()=>this.methodName()}></button>
 )
}

Third approach

methodName = () => {
//scope
}

render(){
 return(
  <button onClick={this.methodName}></button>
 )
}

The third type is not available for older versions of react you have to use class experimental plugin for that, In that case you should always you the first approach

The second approach should always be used when you need to pass a parameter otherwise don't use that

Also please note If you just write

<button onClick={this.methodName()}></button>

That means you are calling the method, but without binding it with event ie whether you click or not the method will always be called