Как добавить href к кнопке в React Material-ui Stepper

Я пытаюсь перенаправить на страницу, когда пользователь нажимает кнопку «Забронировать сейчас» в конце шага вместо того, чтобы отображать «Спасибо за проявленный интерес». Можно ли это сделать, добавив href = "/ booking" к кнопке на последнем шаге? Или есть другой способ, добавив функцию для этого? Заранее спасибо!

Вот часть кода, о которой я говорю:

                  <React.Fragment>
                        {activeStep === steps.length ? (
                            <React.Fragment>
                                <Typography variant="h5" gutterBottom>
                                    Thank you for your interest!
                                </Typography>
                            </React.Fragment>
                            ) : (
                            <React.Fragment>
                                {this.getStepContent(activeStep)}
                                <div className={classes.buttons}>
                                    {activeStep !== 0 && (
                                        <Button onClick={this.handleBack} className={classes.button}>
                                            Back
                                        </Button>
                                    )}
                                    <Button
                                        variant="contained"
                                        color="primary"
                                        onClick={this.handleNext}
                                        className={classes.button}
                                    >
                                        {activeStep === steps.length - 1 ? 'Book Now' : 'Next'}
                                    </Button>
                                </div>
                            </React.Fragment>
                            )}
                    </React.Fragment>

reactjs stepper material-ui href
person Bojan Mitrovic    schedule 06.04.2020    source источник
comment
Вы пробовали добавить window.location.href = '/ booking' где-нибудь в шаблоне? Я бы посоветовал вам закодировать степпер, как указано в документации: (codeandbox.io/s/tnpyj?file=/demo.js). В основном вы добавляете функцию-наблюдатель для activeStep, а затем добавляете window.location в эту функцию очень просто, так как она отслеживает шаги и, если шаги завершены, перенаправляет вас туда, куда вы хотите   -  person VPaul    schedule 07.04.2020
comment
Итак, функция будет искать activeStep === steps.length и перенаправлять? Вы можете привести пример? Спасибо   -  person Bojan Mitrovic    schedule 07.04.2020
comment
См. Пример ниже в разделе «Ответы».   -  person VPaul    schedule 07.04.2020

Ответы (1)


arrow_upward
1
arrow_downward

Как упоминалось в моих комментариях, я бы дал решение, основанное на официальном коде документации по адресу: https://codesandbox.io/s/tnpyj?file=/demo.js

Вы можете создать функцию, подобную приведенной ниже, чтобы отслеживать activeStep.

const isLastStep = () => {
  if (activeStep === steps.length) window.location.href = '\booking';
  return false;
};

Теперь в вашем шаблоне вы можете вызвать эту функцию вместо ручной проверки последнего шага, как показано ниже:

{isLastStep ? (

Это грязное решение, но правильное его выполнение, как указано в приведенной выше ссылке, может сделать его более чистым. Я надеюсь, что это помогает.

person VPaul    schedule 06.04.2020