如何在 React material-ui 步进器中将 href 添加到按钮

Question

当用户单击步进器末尾的 "Book now" 按钮而不是显示 "Thank you for your interest" 时，我试图重定向到一个页面。这可以通过在最后一步向按钮添加 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>

Answer 1

正如我在评论中提到的，我会根据官方文档代码给出一个解决方案：https://codesandbox.io/s/tnpyj?file=/demo.js

您可以创建如下所示的函数来跟踪 activeStep。

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

现在在您的模板中您可以调用此函数而不是手动检查最后一步，如下所示：

{isLastStep ? (

这是一个肮脏的解决方案，但按照上面 link 中所述正确执行可以使它看起来更干净。希望对你有帮助。