Reactjs 使用React钩子在物料UI步进器中传递数据

我有一个多步骤表单，我想在React中使用Formik、materialui、功能组件和getState钩子实现它

从“React”导入React，{useState，Fragment}； 从“@material ui/core”导入{按钮、步进器、步骤、步骤标签}； 从“/FormPartA”导入FormPartA； 从“/FormPartB”导入FormPartB； 从“/FormPartC”导入FormPartC； 函数多步骤Props{ 常量步骤=['A部分'、'B部分'、'C部分']； const passedValues=props.values | |{}； const[activeStep，setActiveStep]=useState0； 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===“未定义”| | passedValues.field6===null？'6”：passedValues.field6 }; 常量handleNext==>{ 警报{…props.values，…values}； setValues{…props.values，…values}； setActiveStepactiveStep+1； }; const handleBack==>{ setActiveStepactiveStep-1； }; 此步骤的功能{ 开关步{ 案例0： 回来 案例1： 回来 案例2： 回来 违约： 抛出新错误'Mis-step！'； } } 回来 {steps.maplabel=> {label} } {activeStep===steps.length？ 你完了！ : {thisStepactiveStep} {activeStep！==0&& 返回 } {activeStep===steps.length-1？'Done'：'Next'} } ; } 为了便于论证，每个子表单大致如下所示，每个子表单只有2个字段：

从“React”导入React； 从'Formik'导入{Formik，useField，Field，Form}； 从“formik材质ui”导入{TextField}； 从Yup导入*作为Yup； 从“@material ui/core”导入{Button}； 导出默认函数BasicFormprops{ const field1=typeof props.values.field1==“未定义”| | props.values.field1==null？：props.values.field1； const field2=typeof props.values.field2==“未定义”| | props.values.field2==null？：props.values.field2； 回来 A部分 {{submitForm，isSubmitting，values，setFieldValue}=> } ; }

---

我没有想到的是状态的更新。如何确保在窗体之间单步执行时保存每个子窗体的子状态？另外，passedValues.field1的类型=='undefined'| | passedValues.field1===null？'1'：passedValues.field1构造似乎很笨拙？

好的，我让它工作了，这对于小值的乐趣来说是非常有趣的。一半的问题是认识到需要将activeStep值、handleNext和handleBack函数传递到子表单，以及预先计算此isLastStep是否：

从“React”导入React，{useState，Fragment}； 从“@material ui/core”导入{按钮、步进器、步骤、步骤标签}； 从“/FormPartA”导入FormPartA； 从“/FormPartB”导入FormPartB； 从“/FormPartC”导入FormPartC； 常量步骤=['A部分'、'B部分'、'C部分']； 函数多步骤Props{ const{field1，field2，field3，field4，field5，field6，}=道具； const[activeStep，setActiveStep]=useState0； 常量[formValues，setFormValues]=useState{ 场1、场2、场3、场4、场5、场6 }; 常量handleNext=newValues=>{ setFormValues{…formValues，…newValues}； setActiveStepactiveStep+1； }; const handleBack=newValues=>{ setFormValues{…formValues，…newValues}； setActiveStepactiveStep-1； }; 函数getStepContentstep{ const isLastStep=activeStep==steps.length-1； 开关步{ 案例0： 回来 案例1： 回来 案例2： 回来 违约： 抛出新错误'Mis-step！'； } } 回来 {steps.maplabel=> {label} } {activeStep===steps.length？ 你完了！ : {getStepContentactiveStep} } ; } 导出默认的多步形式； 此时，子表单可以在进入下一步之前检查其字段是否有效：

进口雷亚尔 ct来自“react”； 从'Formik'导入{Formik，useField，Field，Form}； 从“formik材质ui”导入{TextField}； 从Yup导入*作为Yup； 从“@material ui/core”导入{Button}； 导出默认函数BasicFormprops{ const{values，field1，field2，activeStep，isLastStep，handleBack，handleNext}=props； 回来 {{submitForm，validateForm，settouch，isSubmitting，values，setFieldValue}=> {activeStep！==0&& {handleBackvalues}}className={classes.button}>Back } 验证窗体 .thenerrors=>{ ifObject.entrieserrors.length==0&&errors.constructor==Object{ Handlenext值； }否则{ 设置触摸错误； } } } > {isLastStep？'Submit Draft'：'Next'} } ; }

---

唯一的另一个技巧是，当子表单无效时，记得设置TouchedErrors，以便未触及的字段显示其验证错误。

好的，我让它工作了，这对于小值的乐趣来说是非常有趣的。一半的问题是认识到需要将activeStep值、handleNext和handleBack函数传递到子表单，以及预先计算此isLastStep是否：

从“React”导入React，{useState，Fragment}； 从“@material ui/core”导入{按钮、步进器、步骤、步骤标签}； 从“/FormPartA”导入FormPartA； 从“/FormPartB”导入FormPartB； 从“/FormPartC”导入FormPartC； 常量步骤=['A部分'、'B部分'、'C部分']； 函数多步骤Props{ const{field1，field2，field3，field4，field5，field6，}=道具； const[activeStep，setActiveStep]=useState0； 常量[formValues，setFormValues]=useState{ 场1、场2、场3、场4、场5、场6 }; 常量handleNext=newValues=>{ setFormValues{…formValues，…newValues}； setActiveStepactiveStep+1； }; const handleBack=newValues=>{ setFormValues{…formValues，…newValues}； setActiveStepactiveStep-1； }; 函数getStepContentstep{ const isLastStep=activeStep==steps.length-1； 开关步{ 案例0： 回来 案例1： 回来 案例2： 回来 违约： 抛出新错误'Mis-step！'； } } 回来 {steps.maplabel=> {label} } {activeStep===steps.length？ 你完了！ : {getStepContentactiveStep} } ; } 导出默认的多步形式； 此时，子表单可以在进入下一步之前检查其字段是否有效：

从“React”导入React； 从'Formik'导入{Formik，useField，Field，Form}； 从“formik材质ui”导入{TextField}； 从Yup导入*作为Yup； 从“@material ui/core”导入{Button}； 导出默认函数BasicFormprops{ const{values，field1，field2，activeStep，isLastStep，handleBack，handleNext}=props； 回来 {{submitForm，validateForm，settouch，isSubmitting，values，setFieldValue}=> {activeStep！==0&& {handleBackvalues}}className={classes.button}>Back } 验证窗体 .thenerrors=>{ ifObject.entrieserrors.length==0&&errors.constructor==Object{ Handlenext值； }否则{ 设置触摸错误； } } } > {isLastStep？'Submit Draft'：'Next'} } ; }

---

唯一的另一个技巧是，当子表单无效时，记住设置TouchedErrors，以便未触及的字段显示其验证错误。

您使用道具做什么？我以为它们不应该在子组件中更改？如果您在props中传递父级字段，则在作为子级的向导组件中更改这些字段。你能解释一下为什么这不是一个问题吗？我不确定你的确切意思是什么-数据和组件的更改是在传递给子级的函数中处理的，从父级、handleNext和handlePrev，并且重新渲染是由对activeStep.OMG的更改触发的。我是个白痴。抱歉，这是我回答的错误堆栈溢出答案。我的学士！你在用道具做什么？我以为它们不应该在子组件中更改？如果您在props中传递父级字段，则在作为子级的向导组件中更改这些字段。你能解释一下为什么这不是一个问题吗？我不确定你的确切意思是什么-数据和组件的更改是在传递给子级的函数中处理的，从父级、handleNext和handlePrev，并且重新渲染是由对activeStep.OMG的更改触发的。我是一名医生 蠢人抱歉，这是我回答的错误堆栈溢出答案。我的学士！