////This is the StepForm.js file which carries initial values and initial stepper steps which is develop using switch case
so also i am posting the first step Personal Form
which carries the front end material ui Text Field parts.
....................................
import React , { useState } from 'react';
import { makeStyles, withStyles } from '@material-ui/core/styles';
import {
Stepper,
Step,
StepLabel,
Button,
Typography,
} from '@material-ui/core';
import PrimaryInfo from './PrimaryInfo';
import PhysicalInfo from './PhysicalInfo';
import PsycologicalInfo from './PsycologicalInfo';
import OccupationInfo from './OccupationInfo';
import LifestyleInfo from './LifestyleInfo';
import HabitsInfo from './HabitsInfo';
import ConfirmDetails from './ConfirmDetails';
import StepConnector from '@material-ui/core/StepConnector';
const useStyles = makeStyles((theme) => ({
root: {
width: '100%',
},
backButton: {
marginRight: theme.spacing(1),
},
instructions: {
marginTop: theme.spacing(1),
marginBottom: theme.spacing(1),
},
line: {
borderColor: '#eaeaf0',
borderTopWidth: 4,
borderRadius: 1,
},
button: {
borderRadius: 18,
width:"150px",
border: "solid 2px",
borderColor:"#76BCF4",
backgroundColor: "secondary",
marginTop: theme.spacing(3),
marginLeft: theme.spacing(1)
},
iconContainer: {
transform: 'scale(1.5)',
}
}));
const initialValues = {
firstName: "",
lastName: "",
email: "",
gender: "",
height: "",
weight:"",
blood:"",
date: "1999-12-31",
city: "",
phone: "",
eegrep: "",
toDecho: "",
mri: "",
degree: "",
speci: "",
nationality: "",
religion: "",
social: "",
hobby: "",
culture: "",
experience: "",
drinking: "",
smoking: "",
other: "",
};
function getSteps() {
return ['Primary Information',
'Physical',
'Psycological',
'Occupation Medical',
'LifeStyle',
'Habits',
'Confirm all Details']}
export default function StepForm() {
const classes = useStyles();
const [formValues, setFormValues] = useState(initialValues);
**const [formErrors, setFormErrors] = useState({});**
const QontoConnector = withStyles({
alternativeLabel: {
top: 9,
left: 'calc(-50% + 26px)',
right: 'calc(50% + 26px)',
},
lineVertical: {
height: 10
},
active: {
'& $line': {
borderColor: '#4791db',
},
},
completed: {
'& $line': {
borderColor: '#4791db',
},
},
line: {
borderColor: '#eaeaf0',
borderTopWidth: 6,
borderRadius: 15,
},
})(StepConnector);
const [activeStep, setActiveStep] = React.useState(0);
const steps = getSteps();
function getStepContent(stepIndex) {
switch (stepIndex) {
case 0:
return <PrimaryInfo
values={formValues}
handleChange={handleChange}
/>;
case 1:
return <PhysicalInfo
values={formValues}
handleChange={handleChange}
/>;
case 2:
return <PsycologicalInfo
values={formValues}
handleChange={handleChange}
/>;
case 3:
return <OccupationInfo
values={formValues}
handleChange={handleChange}
/>;
case 4:
return <LifestyleInfo
values={formValues}
handleChange={handleChange}
/>;
case 5:
return <HabitsInfo
values={formValues}
handleChange={handleChange}
/>;
case 6:
return <ConfirmDetails
values={formValues}
/>;
default:
return 'Unknown stepIndex';
}
}
const handleNext = () => {
setActiveStep((prev) => prev + 1);
};
const handleBack = () => {
setActiveStep((prev) => prev - 1);
};
const handleChange = (e) => {
const { name, value } = e.target;
// Set values
setFormValues((prev) => ({
...prev,
[name]: value
}));
// set errors
const error = validate(name, value) || "";
setFormErrors({
[name]: error
});
};
const handleReset = () => {
setActiveStep(0);
};
return (
<div className={classes.root}>
<Stepper
activeStep={activeStep} alternativeLabel
style={{ margin: "0px 0px 15px 5px"}}
connector={<QontoConnector />}
className={classes.stepper}>
{steps.map((label) => (
<Step key={label}>
<StepLabel>{label}</StepLabel>
</Step>
))}
</Stepper>
<div>
{activeStep === steps.length ? (
<div>
<Typography className={classes.instructions}>All steps completed</Typography>
<Button onClick={handleReset}>Reset</Button>
</div>
) : (
<div>
<Typography className={classes.instructions}>{getStepContent(activeStep)}</Typography>
<div>
<Button
disabled={activeStep === 0}
onClick={handleBack}
className={classes.backButton}
>
Back
</Button>
<Button
variant="contained"
color="primary"
onClick={handleNext}>
{activeStep === steps.length - 1 ? 'Confirm' : 'Next'}
</Button>
</div>
</div>
)}
</div>
</div>
);
}
///////////////////////////////////////// ///////////////// 个人表格 /////////////////////// //////////////////////////////////
这是值，并且句柄更改功能已通过。这是代码
import React from 'react';
import { TextField, Grid, Typography } from '@material-ui/core';
const PrimaryInfo = ({
handleChange,
values: { firstName, lastName, email, gender, height, weight, blood }
}) => {
return (
<React.Fragment>
<Typography variant="h6" style={{marginBottom:"20px", marginTop:"-10px"}}>
Primary Information
</Typography>
<Grid container spacing={3}>
<Grid item xs={12} sm={6}>
<TextField
fullWidth
size="small"
label="First Name"
name="firstName"
type="text"
placeholder="Your first name"
margin="normal"
value={firstName || ""}
variant="outlined"
onChange={handleChange}
required
style={{backgroundColor: '#ffffff'}}
// error={meta.touched && meta.error && true}
// helperText={_renderHelperText()}
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
fullWidth
size="small"
label="Last Name"
name="lastName"
type="text"
placeholder="Your last name"
margin="normal"
value={lastName || ""}
variant="outlined"
onChange={handleChange}
required
style={{backgroundColor: '#ffffff'}}
// error={meta.touched && meta.error && true}
// helperText={_renderHelperText()}
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
fullWidth
size="small"
label="Email Address"
name="email"
type="email"
placeholder="Your Email Address"
margin="normal"
value={email || ""}
variant="outlined"
onChange={handleChange}
required
style={{backgroundColor: '#ffffff'}}
// error={meta.touched && meta.error && true}
// helperText={_renderHelperText()}
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
fullWidth
size="small"
label="Gender"
name="gender"
type="text"
placeholder="Your Gender"
margin="normal"
value={gender || ""}
variant="outlined"
onChange={handleChange}
required
style={{backgroundColor: '#ffffff'}}
// error={meta.touched && meta.error && true}
// helperText={_renderHelperText()}
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
fullWidth
size="small"
label="Height(cms)"
name="height"
type=""
placeholder="Your Height"
margin="normal"
value={height || ""}
variant="outlined"
onChange={handleChange}
required
style={{backgroundColor: '#ffffff'}}
// error={meta.touched && meta.error && true}
// helperText={_renderHelperText()}
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
fullWidth
size="small"
label="Weight(kgs)"
name="weight"
type=""
placeholder="Your Weight"
margin="normal"
value={weight || ""}
variant="outlined"
onChange={handleChange}
required
style={{backgroundColor: '#ffffff'}}
// error={meta.touched && meta.error && true}
// helperText={_renderHelperText()}
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
fullWidth
size="small"
label="Blood Group"
name="blood"
type=""
placeholder="Your Blood Group"
margin="normal"
value={blood || ""}
variant="outlined"
onChange={handleChange}
required
style={{backgroundColor: '#ffffff'}}
// error={meta.touched && meta.error && true}
// helperText={_renderHelperText()}
/>
</Grid>
</Grid>
</React.Fragment>
);
}
export default PrimaryInfo;
所以，请帮助我，我应该如何将handleChange函数中携带的输入值与验证进行比较，并在Textfield的helperText中显示错误？