选项卡中的 Formik React

Question

想将 formik 与选项卡一起使用，但有很多表单，一种方法是将我的所有表单添加到带有选项卡的 formik 中，但代码不会非常有效，任何带有 formik 的选项卡和组件示例都可以获取所有重视任何示例或喜欢将不胜感激

Answer 1

Just have to add values as props and handleChnage , for everything to work and errors as useFormikContext()

登录组件

const LoginDetails = props => {
    let captureForm = useFormikContext();

    return (
        <div>
            
                    <Box mt={2}>
                        <TextField
                            error={Boolean(
                                captureForm.touched.loginCode && captureForm.errors.loginCode
                            )}
                            helperText={
                                captureForm.touched.loginCode && captureForm.errors.loginCode
                            }
                            fullWidth
                            label="Login Code"
                            name="loginCode"
                            onChange={props.onChange}
                            value={props.values.loginCode}
                            variant="outlined"
                            onBlur={() => captureForm.setFieldTouched('loginCode', true)}
                        />
                    </Box>
                    <Box mt={2}>
                        <TextField
                            error={Boolean(
                                captureForm.touched.password && captureForm.errors.password
                            )}
                            helperText={
                                captureForm.touched.password && captureForm.errors.password
                            }
                            fullWidth
                            label="Password"
                            name="password"
                            type={'password'}
                            onChange={props.onChange}
                            value={props.values.password}
                            variant="outlined"
                            onBlur={() => captureForm.setFieldTouched('password', true)}
                        />
                    </Box>

        </div>
    );
};

export default LoginDetails;



//FORMIK
<Formik
                innerRef={formRef}
                enableReinitialize={true}
                initialValues={{
                    
                    //Login
                    loginCode: currentEntityData.loginCode || '',
                    password: currentEntityData.password || '',

                }}
                validationSchema={Yup.object().shape({
                    
                    
                    //Login
                    [props.entityType === 3 ? 'loginCode' : '']:
                        Yup.string().required('LoginCode is required.') || '',

                    [props.entityType === 3 ? 'password' : '']:
                        Yup.string().required('Password is required.') || '',

                    
                    verified: Yup.bool(),
                })}
                onSubmit={async (
                    values,
                    { resetForm, setErrors, setStatus, setSubmitting }
                ) => {
                    try {
                        //Call submitForm function then notification
                        submitForm(values).then(() => {
                            setMessageDisplay(true);
                            props.closeentityform();
                            props.refreshtable();
                        });
                    } catch (error) {
                        setStatus({ success: false });
                        setErrors({ submit: error.message });
                        setSubmitting(false);
                    }
                }}
            >
                {({
                    errors,
                    handleBlur,
                    handleChange,
                    handleSubmit,
                    isSubmitting,
                    setFieldTouched,
                    setFieldValue,
                    touched,
                    values,
                }) => (
                    <form onSubmit={handleSubmit} {...props}>
                        <Card>
                            {/*Banking Dialogue */}
                            
                            <CardContent>
                                {/*Forms based in tabs */}
                                {/*Selective tabs based on type */}
                                <Tabs
                                    value={value}
                                    onChange={handleTabChange}
                                    variant="scrollable"
                                    textColor="primary"
                                    scrollButtons="auto"
                                >
                                    
                                
                                    {props.entitytype === 3 ? <Tab label="Login Details" /> : ''}
                                    {/*Login*/}
                                

                                </Tabs>

                                {value === 0 && (
                                    //Data
                                )}

                                
                                {/*///////////////////////Login Details//////////////////////////// */}
                                {props.entitytype === 1
                                    ? value === 3
                                    : value === 2 && (
                                            <>
                                                <Box mt={2}>
                                                    <LoginDetails
                                                        values={values}
                                                        onChange={handleChange}
                                                    />
                                                </Box>
                                            </>
                                      )}

                                {/*///////////////////////Member Details//////////////////////////// */}

                                {props.entitytype === 2
                                    ? value === 1 && (
                                            <>
                                                <MemberShip values={values} onChange={handleChange} />
                                            </>
                                      )
                                    : props.entitytype === 1
                                    ? value === 2 && (
                                            <>
                                                <MemberShip values={values} onChange={handleChange} />
                                            </>
                                      )
                                    : ''}

                                {/*/////////////////////////////////Staff //////////////////////////////*/}
                                {props.entitytype === 1
                                    ? value === 3
                                    : value === 3 && (
                                            <>
                                                <Box mt={2}>
                                                    <Grid container spacing={3}>
                                                        <Grid item xs={4}>
                                                            <Typography>User</Typography>
                                                            <Checkbox
                                                                name="userCheck"
                                                                color="primary"
                                                                checked={userCheck}
                                                                onChange={() => isUserSelected()}
                                                            ></Checkbox>
                                                        </Grid>
                                                        <Grid item xs={4}>
                                                            <Typography>Financial User</Typography>
                                                            <Checkbox
                                                                name="financialUserCheck"
                                                                color="primary"
                                                                checked={financialUserCheck}
                                                                onChange={() => isFinancialUserSelected()}
                                                            ></Checkbox>
                                                        </Grid>
                                                        <Grid item xs={4}>
                                                            <Typography>Admin</Typography>
                                                            <Checkbox
                                                                name="userCheck"
                                                                color="primary"
                                                                checked={adminCheck}
                                                                onChange={() => isAdminSelected()}
                                                            ></Checkbox>
                                                        </Grid>
                                                    </Grid>
                                                    <Box mt={2}></Box>
                                                    <TextField
                                                        fullWidth
                                                        label="Staff Number"
                                                        name="staff.staffId"
                                                        onBlur={handleBlur}
                                                        onChange={handleChange}
                                                        value={values.staff.staffId}
                                                        variant="outlined"
                                                        error={Boolean(
                                                            getIn(touched, 'staff.staffId') &&
                                                                getIn(errors, 'staff.staffId')
                                                        )}
                                                        helperText={
                                                            getIn(touched, 'staff.staffId') &&
                                                            getIn(errors, 'staff.staffId')
                                                        }
                                                    />
                                                </Box>
                                                <Box mt={2}>
                                                    <TextField
                                                        fullWidth
                                                        label="Join Date"
                                                        type={'date'}
                                                        name="staff.joinDate"
                                                        onBlur={handleBlur}
                                                        onChange={handleChange}
                                                        value={values.staff.joinDate}
                                                        variant="outlined"
                                                        error={Boolean(
                                                            getIn(touched, 'staff.joinDate') &&
                                                                getIn(errors, 'staff.joinDate')
                                                        )}
                                                        helperText={
                                                            getIn(touched, 'staff.joinDate') &&
                                                            getIn(errors, 'staff.joinDate')
                                                        }
                                                    />
                                                </Box>
                                                <Box mt={2}>
                                                    <TextField
                                                        fullWidth
                                                        label="Leave Date"
                                                        type="date"
                                                        name="staff.leaveDate"
                                                        onBlur={handleBlur}
                                                        onChange={handleChange}
                                                        value={values.staff.leaveDate}
                                                        variant="outlined"
                                                        error={Boolean(
                                                            getIn(touched, 'staff.leaveDate') &&
                                                                getIn(errors, 'staff.leaveDate')
                                                        )}
                                                        helperText={
                                                            getIn(touched, 'staff.leaveDate') &&
                                                            getIn(errors, 'staff.leaveDate')
                                                        }
                                                    />
                                                </Box>
                                            </>
                                      )}

                                

                                <Box mt={3}>
                                    <Button
                                        variant="contained"
                                        color="secondary"
                                        type="submit"
                                        disabled={isSubmitting}
                                    >
                                        {props.id ? 'Save Changes' : 'Add User'}
                                    </Button>
                                    &nbsp;&nbsp;&nbsp;
                                    <Button
                                        onClick={props.closeentityform}
                                        variant="contained"
                                        color="secondary"
                                        disabled={isSubmitting}
                                    >
                                        Cancel
                                    </Button>
                                </Box>
                            </CardContent>
                        </Card>
                    </form>
                )}
            </Formik>