在 ReactJS 中设计步进表单
步进器通过一系列逻辑和编号的步骤显示进度。它们也可用于导航。保存步骤后,步进器可能会显示瞬态反馈消息。
在本文中,我们将学习如何使用react 和 material-ui 创建一个垂直步进表单。我们将创建一个垂直步进器并向其添加一个表单容器。在步进形式的所有阶段,我们将添加不同的细节。就像您有不同的阶段来填写表格一样,完成所有步骤后,您将进入决赛。
创建 React 应用程序
第 1 步:使用以下命令创建反应应用程序。
npx create-react-app my-first-app
第 2 步:通过执行命令将目录更改为该文件夹:
cd my-first-app
第 3 步:安装必要的依赖项。转到目录'src'并在那里执行命令提示符并运行命令
npm install @material-ui/core/Stepper
npm install @material-ui/core/Step
npm install @material-ui/core/StepLabel
文件结构:它将如下所示。
第四步:在根组件中导入
App.js
import GeekStepper from './StepperForm'
function App() {
return (
);
}
export default App;
StepperForm.jsx
import React from 'react';
import { makeStyles, Theme, createStyles }
from '@material-ui/core/styles';
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 Button from '@material-ui/core/Button';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
width: '100%',
},
button: {
marginTop: theme.spacing(1),
marginRight: theme.spacing(1),
},
actionsContainer: {
marginBottom: theme.spacing(2),
},
resetContainer: {
padding: theme.spacing(3),
},
}),
);
function getSteps() {
return ['Enter Personal Details',
'Enter Education Details',
'Enter Address'];
}
function getStepContent(step: number) {
switch (step) {
case 0:
return (
);
case 1:
return (
);
case 2:
return (
);
default:
return 'Unknown step';
}
}
export default function GeekStepper() {
const classes = useStyles();
const [activeStep, setActiveStep] = React.useState(0);
const steps = getSteps();
const handleNext = () => {
setActiveStep((prevActiveStep) => prevActiveStep + 1);
};
const handleBack = () => {
setActiveStep((prevActiveStep) => prevActiveStep - 1);
};
const handleReset = () => {
setActiveStep(0);
};
return (
GeeksforGeeks Stepper Form
{steps.map((label, index) => (
{label}
{getStepContent(index)}
))}
{activeStep === steps.length && (
Form is submitted
)}
);
}
第 5 步:在此文件中,我们将实施 Stepper Form 以提交用户的个人详细信息、教育详细信息和地址。 Stepper 是在 react 中使用 material-ui 创建的。我们在这个组件中导入了不同的 ui 类,如 Stepper、StepLabel 等。
表单是使用主动步骤和 ActiveStep 实现的。这些步骤用于显示处于活动状态的表单组件并返回。
StepperForm.jsx
import React from 'react';
import { makeStyles, Theme, createStyles }
from '@material-ui/core/styles';
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 Button from '@material-ui/core/Button';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
width: '100%',
},
button: {
marginTop: theme.spacing(1),
marginRight: theme.spacing(1),
},
actionsContainer: {
marginBottom: theme.spacing(2),
},
resetContainer: {
padding: theme.spacing(3),
},
}),
);
function getSteps() {
return ['Enter Personal Details',
'Enter Education Details',
'Enter Address'];
}
function getStepContent(step: number) {
switch (step) {
case 0:
return (
);
case 1:
return (
);
case 2:
return (
);
default:
return 'Unknown step';
}
}
export default function GeekStepper() {
const classes = useStyles();
const [activeStep, setActiveStep] = React.useState(0);
const steps = getSteps();
const handleNext = () => {
setActiveStep((prevActiveStep) => prevActiveStep + 1);
};
const handleBack = () => {
setActiveStep((prevActiveStep) => prevActiveStep - 1);
};
const handleReset = () => {
setActiveStep(0);
};
return (
GeeksforGeeks Stepper Form
{steps.map((label, index) => (
{label}
{getStepContent(index)}
))}
{activeStep === steps.length && (
Form is submitted
)}
);
}
运行应用程序的步骤:通过在 src 中执行以下命令来运行您的应用程序
npm start
输出: