时间戳

首页 > 解决方案 > 如何在反应材料-ui步进器中将href添加到按钮

reactjs - 如何在反应材料-ui步进器中将href添加到按钮

问题描述

当用户单击 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>

标签： reactjsmaterial-uihrefstepper

解决方案

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

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

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

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

{isLastStep ? (

这是一个肮脏的解决方案，但如上面链接中所述正确执行可以使其看起来更干净。我希望它有所帮助。

推荐阅读