简单的 JS vanilla/react function 重写，但是如何？

Question

I have a written a nasty bit of code over and over, but how can I make it a reusable function (and how would I call it?) step: step - 'x' <--- this is the only functional bit that actual changes!

This is the nasty code:(

  prevStep2 = () => {
    const { step } = this.state;
    this.setState({
      step: step - 6
    });
    window.scrollTo(0, 0);
  };
  //Back to step 3
  prevStep3 = () => {
    const { step } = this.state;
    this.setState({
      step: step - 5
    });
    window.scrollTo(0, 0);
  };
  //Back to step 4
  prevStep4 = () => {
    const { step } = this.state;
    this.setState({
      step: step - 4
    });
    window.scrollTo(0, 0);
  };
  //Back to step 5
  prevStep5 = () => {
    const { step } = this.state;
    this.setState({
      step: step - 3
    });
    window.scrollTo(0, 0);
  };
  //Back to step 6
  prevStep6 = () => {
    const { step } = this.state;
    this.setState({
      step: step - 2
    });
    window.scrollTo(0, 0);
  };
  //Back to step 7
  prevStep7 = () => {
    const { step } = this.state;
    this.setState({
      step: step - 1
    });
    window.scrollTo(0, 0);
  };

My attempt at the rewrite:

function backToStep(stepNumber){
    const { step } = this.state;
    this.setState({
      step: step - stepNumber
    });
    window.scrollTo(0, 0);
}

Called like

<button onClick={this.backToStep(5)}>Test</button>

But not sure if it would work properly!

Answer 1

onClick expects a function. this.backToStep(5) returns void , so you have a problem. You need either to pass an anonymous function to onClick :

<button onClick={() => this.backToStep(5)}>Test</button>

Or to make backToStep return a function:

function backToStep(stepNumber) {
  return () => {
    const { step } = this.state;
    this.setState({
      step: step - stepNumber
    });
    window.scrollTo(0, 0);
  }
}

<button onClick={this.backToStep(5)}>Test</button>

Also, it's considered a good practice to use the callback parameter when your setState depends on the actual state.

If the next state depends on the current state, we recommend using the updater function form, instead:

this.setState(prevState => ({
  step: prevState.step - stepNumber
}))