使用 React Hooks 跨 Material-UI 步进器传递数据

Question

我有一个多步骤形式，我想使用Formik、Material-ui、功能组件和getState钩子在 React 中实现。

import React, { useState, Fragment } from 'react';
import { Button, Stepper, Step, StepLabel } from '@material-ui/core';
import FormPartA from './FormPartA';
import FormPartB from './FormPartB';
import FormPartC from './FormPartC';
function MultiStepForm(props) {
const steps = ['Part A', 'Part B', 'Part C'];
const passedValues = props.values || {};
const [activeStep, setActiveStep] = useState(0);
const [values, setValues] = useState({
field1:(( typeof passedValues.field1 === 'undefined' || passedValues.field1 === null ) ? '1' : passedValues.field1 ),
field2:(( typeof passedValues.field2 === 'undefined' || passedValues.field2 === null ) ? '2' : passedValues.field2 ),
field3:(( typeof passedValues.field3 === 'undefined' || passedValues.field3 === null ) ? '3' : passedValues.field3 ),
field4:(( typeof passedValues.field4 === 'undefined' || passedValues.field4 === null ) ? '4' : passedValues.field4 ),
field5:(( typeof passedValues.field5 === 'undefined' || passedValues.field5 === null ) ? '5' : passedValues.field5 ),
field6:(( typeof passedValues.field6 === 'undefined' || passedValues.field6 === null ) ? '6' : passedValues.field6 )
});
const handleNext = () => {
alert({...props.values, ...values});
setValues({...props.values, ...values});
setActiveStep(activeStep + 1);
};
const handleBack = () => {
setActiveStep(activeStep - 1);
};
function thisStep(step) {
switch (step) {
case 0:
return <FormPartA values={values} setValues={setValues}/>;
case 1:
return <FormPartB values={values} setValues={setValues}/>;
case 2:
return <FormPartC values={values} setValues={setValues}/>;
default:
throw new Error('Mis-step!');
}
}
return (
<div className="MultiStepForm">
<Stepper activeStep={activeStep} className={classes.stepper}>
{steps.map(label => (
<Step key={label}>
<StepLabel>{label}</StepLabel>
</Step>
))}
</Stepper>
<Fragment>
{activeStep === steps.length ? ( 
<p>You're done!<p>
) : (
<Fragment>
{thisStep(activeStep)}
<div className={classes.buttons}>
{activeStep !== 0 && (
<Button onClick={handleBack} > Back </Button>
)}
<Button onClick={handleNext} >
{activeStep === steps.length - 1 ? 'Done' : 'Next'}
</Button>
</div>
</Fragment>
)}
</Fragment>
</div>
);
}

为了便于讨论，每个子窗体看起来大致如下所示，每个子窗体只有 2 个字段：

import React from 'react';
import {Formik, useField, Field, Form} from 'formik';
import { TextField } from 'formik-material-ui';
import * as Yup from "yup";
import { Button } from '@material-ui/core';
export default function BasicForm(props) {
const field1 = ( typeof props.values.field1 === 'undefined' || props.values.field1 === null ) ? '' : props.values.field1;
const field2 = ( typeof props.values.field2 === 'undefined' || props.values.field2 === null ) ? '' : props.values.field2;
return (
<div>
<h3>Part A</h3>
<Formik
initialValues={{
field1,
field2
}}
validationSchema={Yup.object({
field1: Yup.string()
.required('Required'),
field2: Yup.string()
.required('Required'),
})}
>
{({submitForm, isSubmitting, values, setFieldValue}) => (
<Form>
<Field name="field1" type="text" label="Field 1" variant="outlined" 
margin="normal" fullWidth multiline component={TextField} />
<Field name="field2" type="text" label="Field 2" variant="outlined" 
margin="normal" fullWidth multiline component={TextField} />
</Form>
)}
</Formik>
</div>
);
}

我逃避的一点是状态的更新。如何确保在窗体之间单步执行时保存每个子窗体的子状态？另外，(( typeof passedValues.field1 === 'undefined' || passedValues.field1 === null ) ? '1' : passedValues.field1 )结构似乎很笨拙？

Answer 1

好吧，我让它工作了，这很有趣(对于小价值的乐趣(。一半的问题是认识到activeStep值、handleNext()和handleBack()函数需要传递给子窗体，以及预先计算这是否isLastStep：

import React, { useState, Fragment } from 'react';
import { Button, Stepper, Step, StepLabel } from '@material-ui/core';
import FormPartA from './FormPartA';
import FormPartB from './FormPartB';
import FormPartC from './FormPartC';
const steps = ['Part A', 'Part B', 'Part C'];
function MultiStepForm(props) {
const { field1, field2, field3, field4, field5, field6, } = props;
const [activeStep, setActiveStep] = useState(0);
const [formValues, setFormValues] = useState({
field1, field2, field3, field4, field5, field6
});
const handleNext = (newValues) => {
setFormValues({ ...formValues, ...newValues });
setActiveStep(activeStep + 1);
};
const handleBack = (newValues) => {
setFormValues({ ...formValues, ...newValues });
setActiveStep(activeStep - 1);
};
function getStepContent(step) {
const isLastStep = (activeStep === steps.length - 1);
switch (step) {
case 0:
return <BasicFormA {...formValues} activeStep={activeStep} isLastStep={isLastStep} handleBack={handleBack} handleNext={handleNext}/>;
case 1:
return <BasicFormB {...formValues} activeStep={activeStep} isLastStep={isLastStep} handleBack={handleBack} handleNext={handleNext}/>;
case 2:
return <BasicFormC {...formValues} activeStep={activeStep} isLastStep={isLastStep} handleBack={handleBack} handleNext={handleNext}/>;
default:
throw new Error('Mis-step!');
}
}
return (
<div className="MultiStepForm">
<Stepper activeStep={activeStep} className={classes.stepper}>
{steps.map(label => (
<Step key={label}>
<StepLabel>{label}</StepLabel>
</Step>
))}
</Stepper>
<Fragment>
{activeStep === steps.length ? (
<p>You're done!<p>
) : (
<Fragment> {getStepContent(activeStep)} <Fragment>
)}
<Fragment>
</div>
);
}
export default MultiStepForm;

此时，子窗体可以检查其字段是否有效，然后再转到下一步：

import React from 'react';
import {Formik, useField, Field, Form} from 'formik';
import { TextField } from 'formik-material-ui';
import * as Yup from "yup";
import { Button } from '@material-ui/core';
export default function BasicForm(props) {
const { values, field1, field2, activeStep, isLastStep, handleBack, handleNext } = props;
return (
<div>
<Formik
initialValues={{
field1,
field2
}}
validationSchema={Yup.object({
field1: Yup.string()
.required('Required'),
field2: Yup.string()
.required('Required'),
})}
>
{({submitForm, validateForm, setTouched, isSubmitting, values, setFieldValue}) => (
<Form>
<Field name="field1" type="text" label="Field 1" variant="outlined" margin="normal" fullWidth multiline component={TextField} />
<Field name="field2" type="text" label="Field 2" variant="outlined" margin="normal" fullWidth multiline component={TextField} />
</Form>
<div>
{activeStep !== 0 && (
<Button onClick={() => { handleBack(values) } } className={classes.button}> Back </Button>
)}
<Button className={classes.button} variant="contained" color="primary" 
onClick={
() => validateForm()
.then((errors) => {
if(Object.entries(errors).length === 0 && errors.constructor === Object ) {
handleNext(values);
} else {
setTouched(errors);
}
})
} >
{isLastStep ? 'Submit Draft' : 'Next'}
</Button>
</div>
)}
</Formik>
</div>
);
}

唯一的其他技巧是记住在子窗体无效时setTouched(errors)，以便未触及的字段显示其验证错误。

Answer 2

这实际上是我在StackOverflow上的第一篇文章，但这对我帮助很大，我不得不添加它。

就我而言，我没有使用子窗体，所以我选择了useState，以有一个对象来放置输入中的答案。我承认这有点蛮力，但一旦我在钩子中实例化对象，管理起来就容易多了。

const [ edit, setEdit ] = useState({1: '', 2: '', 3: '', 4: '', 5: '', 6: '', 7: '', 8: ''});
const [activeStep, setActiveStep] = useState(0);
const handleInputChange = (e) => {
setEdit({...edit, [e.target.name]: e.target.value});
}
const handleNext = () => {
setActiveStep((prevActiveStep) => prevActiveStep + 1);};
const handleBack = () => {
setActiveStep((prevActiveStep) => prevActiveStep - 1);
};

我知道 dinamic 对象会更好，但通过此设置，我可以使用 MUI 输入仅更改名称和值，如下所示：

<Input
name={`${activeStep + 1}`}
variant="standard"
value={edit[`${activeStep + 1}`]}
onChange={(e) => handleInputChange(e)}
/>

有了这个，输入值将随着每一步而移动，希望它对其他人有所帮助！