Простая JS функция перезаписи ванили / реакции, но как?

Question

Я много раз писал неприятный код, но как я могу сделать его функцией многократного использования (и как бы я назвал ее?) Step: step - 'x' <--- это единственный функционал немного фактических изменений! </p>

Это неприятный код: (

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

Моя попытка переписать:

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

Вызывается как

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

Но не уверен, что он будет работать правильно!

Answer 1

onClick ожидает функцию. this.backToStep(5) возвращает void, поэтому у вас есть проблема. Вам нужно либо передать анонимную функцию в onClick:

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

, либо заставить backToStep вернуть функцию:

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

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

Кроме того, это считается хорошим потренируйтесь использовать параметр обратного вызова, когда ваш setState зависит от фактического состояния.

Если следующее состояние зависит от текущего состояния, мы рекомендуем вместо этого использовать форму функции средства обновления:

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