Как принять более 1 параметров в onClick React

Question

Здравствуйте, я новичок в React, у меня есть кнопка в компоненте реагирования, и я хочу передать 2 опции его методу onClick, что-то вроде:

  handleClick = clickType => {
    const {currentStep} = this.state
    let newStep = currentStep
    clickType === 'next' ? newStep++ : newStep--
    if (newStep > 0 && newStep <= 6) {
      this.setState({
        currentStep: newStep
      });
    }
  }
  handleChange = input => e => {
    this.setState({ [input]: e.target.value });
  };

  continue = e => {
    e.preventDefault();
    this.props.nextStep();
  };

  back = e => {
    e.preventDefault();
    this.props.prevStep();
  };
<button onClick={() => this.handleClick(), this.back} className='previous'>قبلی</button> 
<button form='my-form' type='submit' onClick={() => this.handleClick('next'), this.continue} className='next'>ادامه</button>

Как мне добиться этого правильно?

Answer 1

Вам нужно настроить свою функцию обработки по-другому.

Скорее, есть что-то вроде этого:

handleBack = e => {
  e.preventDefault()

  if (this.state.currentStep > 1) {
    this.setState((prevState) => ({
      currentStep: prevState.currentStep - 1
    }));
  }

  this.props.prevStep()
}

handleNext = e => {
  e.preventDefault()

  if (this.state.currentStep < 6) {
    this.setState((prevState) => ({
      currentStep: prevState.currentStep + 1
    }));
  }

  this.props.nextStep()
}

<button onClick={this.handleBack} ... />
<button onClick={this.handleNext} ... />

Этот метод намного чище и его легче читать, потому что каждая функция имеет дело со своим собственный щелчок.

Теперь вы можете легко видеть, что именно происходит, когда вы нажимаете назад, и точно, что происходит, когда вы нажимаете следующий.

Answer 2

Функция стрелки внутри onClick может выполнять более одной функции.

Это все еще функция, и вы можете поместить в нее код;)

Но, возможно, вы можете улучшить ваш текущий код:

handleClick = clickType => {
        const {currentStep} = this.state
    let newStep = currentStep
    clickType === 'next' ? newStep++ : newStep--
    if (newStep > 0 && newStep <= 6) {
      this.setState({
        currentStep: newStep
      });
    }
  }
  handleChange = input => e => {
    this.setState({ [input]: e.target.value });
  };

  continue = e => {
    e.preventDefault();
    this.props.nextStep();
  };

  back = e => {
    e.preventDefault();
    this.props.prevStep();
  };
<button onClick={(e) => { this.handleClick(); this.back(e); }} className='previous'>قبلی</button> 
<button form='my-form' type='submit' onClick={() => { this.handleClick('next'); this.continue(e); }} className='next'>ادامه</button>

К этой версии:

handleNext = (e) => {
  const { currentStep } = this.state;

  if (currentStep >= 0 && currentStep <= 5) {
    this.setState({
      currentStep: currentStep++
    });
  }

  this.props.nextStep();
}

handlePrevious = (e) => {
  const { currentStep } = this.state;

  if (currentStep > 0 && currentStep <= 5) {
    this.setState({
      currentStep: currentStep--
    });
  }

  this.props.prevStep();
}


<button onClick={this.handlePrevious} className='previous'>قبلی</button> 
<button form='my-form' type='submit' onClick={this.handleNext} className='next'>ادامه</button>

Answer 3

Вы можете использовать что-то вроде этого

/**
I copied this function from code, please make sure that its working.
*/
  handleChange = input => e => {
    this.setState({ [input]: e.target.value });
  };

  updateStep = step => {
   if (step > 0 && step <= 6)
     this.setState({
       currentStep: newStep
     });
  }

  /**
  Try to avoid the keywords like continue, break, for, while etc as 
  variable or function names.

 */
  handleContinue = e => {
    e.preventDefault();
    this.handleClick(this.state.currentStep+1);
    this.props.nextStep();
  };

  handleBack = e => {
    e.preventDefault();
    this.handleClick(this.state.currentStep-1);
    this.props.prevStep();
  };


<button onClick={this.handleBack} className='previous'>قبلی</button> 
<button form='my-form' type='submit' onClick={this.handleContinue} className='next'>ادامه</button>