reactjs - 如何在material-ui中同时激活所有步骤?
问题描述
我在我的 React 项目中使用 material-ui,现在我想展示一个步进器。但我不想要按钮来逐步前进和前进。我希望所有步骤一起活跃。
import React from 'react';
import Stepper from '@material-ui/core/Stepper';
import Step from '@material-ui/core/Step';
import StepLabel from '@material-ui/core/StepLabel';
import StepContent from '@material-ui/core/StepContent';
import Typography from '@material-ui/core/Typography';
function getSteps() {
return ['Title 1', 'Title 2', 'Title 3'];
}
function getStepContent(step) {
switch (step) {
case 0:
return `For each ad campaign that you create, you can control how much
you're willing to spend on clicks and conversions, which networks
and geographical locations you want your ads to show on, and more.`;
case 1:
return 'An ad group contains one or more ads which target a shared set of keywords.';
case 2:
return `Try out different ad text to see what brings in the most customers,
and learn how to enhance your ads using features like ad extensions.
If you run into any problems with your ads, find out how to tell if
they're running and how to resolve approval issues.`;
default:
return 'Unknown step';
}
}
class VerticalLinearStepper extends React.Component {
render() {
const steps = getSteps();
return (
<div className={classes.root}>
<Stepper orientation="vertical">
{steps.map((label, index) => {
return (
<Step key={label} active={true}>
<StepLabel>{label}</StepLabel>
<StepContent>
<Typography>{getStepContent(index)}</Typography>
</StepContent>
</Step>
);
})}
</Stepper>
</div>
);
}
}
我想要的是在没有任何按钮的情况下一起查看所有步骤的内容来前进和后退。但我只能看到第一步的内容,因为activestep
'Stepper'的prop的默认值为0。
解决方案
将 active = {true} 添加到 Step 组件解决了这个问题。
推荐阅读
- vue.js - 如何使用选定的值初始化选择?
- jsf - 如何将 p:photoCam 更新到最新版本但将我的 primefaces 保留在 6.1.RC2 中?
- javascript - 如何为 django 中的用户从本地目录制作文件上传器(.jpg、.mp3、.pdf 等)
- css - 为高度设置的 SASS 变量(如果高度)
- powerbi - 如何根据日期切片器但来自 2 个日期列显示数据
- smalltalk - 如何在 Visual Works 中获取 CPointer 的值
- javascript - 在 React 中获取数据
- unit-testing - 您如何在 aws-cdk 单元测试中模拟现有的 vpc?
- jquery - 从局部视图加载的 jQuery 自动完成结果
- python - Selenium 无法使用 python 定位错误?