Question

我正在使用Formik，Yup和Material-UI构建多步骤表单。我使用父级形式保持formik状态，并使用useState将页码保持在不同状态，这指示了要呈现哪个子组件。我正在传递formik作为道具和下一个/上一个页面功能。

仅当特定页面中的输入有效时，我才允许移动到子组件的下一页。通过阅读文档并没有找到任何直接的解决方案，因此在PageOne组件中创建了以下解决方案。

这是一个很大的步骤，有很多步骤，也许有更好的方法可以进入formik / yup并获得这些特定值的有效性吗？

这是一个示例代码（可读性比应用小，但想法是相同的），父组件：

import React, { useState } from 'react';
import * as yup from 'yup';
import { useFormik } from 'formik';
import {
    Button,
    Paper
} from '@material-ui/core';
import PageOne from './components/PageOne';
import PageTwo from './components/PageTwo';

const initialValues  = {
    firstName: '',
    lastName: '',
    country: '',
    age: null,
}

const onSubmit = (values) => {
    console.log('Form Data \n', values)
}

const validationSchema = yup.object({
    firstName: yup.string().required('Required field'),
    lastName: yup.string().required('Required field'),
    country: yup.string().required('Required field'),
    age: yup.number().required('Required field'),
})

const FormParent = () => {

    const formik = useFormik({
        initialValues,
        onSubmit,
        validationSchema,
    })

    const [page, SetPage] = useState(1);

    const nextPage = () => SetPage(page + 1)

    const prevPage = () => SetPage(page - 1)

    return(
        <form>
            <Paper}>
                {page === 1 && <PageOne formik={formik} nextPage={nextPage} />}
                {page === 2 && <PageTwo formik={formik} prevPage={prevPage} />}
            </Paper>
        </form>
    )
}

export default FormParent;

和Page组件示例：

import React from 'react';
import { useFormik } from 'formik';
import {
    Button,
    TextField,
    FormHelperText 
} from '@material-ui/core';

const PageOne = ({ formik, nextPage }) => {

    const pageIsValid = () => {
        if (!formik.touched.firstName && !formik.touched.firstName && !formik.touched.firstName) {
            return false;
        } else {
            return (
                !(formik.errors.lastName && formik.touched.lastName) &&
                !(formik.errors.firstName && formik.touched.firstName) &&
                !(formik.errors.age && formik.touched.age)
            )
        }
    }

    return(
        <div style={{width: '100%'}}>
            <div style={{width: '100%'}}>
                <TextField 
                    {...formik.getFieldProps('firstName')} 
                    fullWidth 
                    label="First Name" 
                    name='firstName' 
                    variant="outlined"
                    helperText={formik.errors.firstName && formik.touched.firstName && `${formik.errors.firstName}`}
                    error={formik.errors.firstName && formik.touched.firstName}
                />
                <TextField 
                    {...formik.getFieldProps('lastName')} 
                    fullWidth
                    label="Last Name" 
                    name='lastName' 
                    variant="outlined"
                    helperText={formik.errors.lastName && formik.touched.lastName && `${formik.errors.lastName}`}
                    error={formik.errors.lastName && formik.touched.lastName}
                />
                <Button disabled={!pageIsValid()} fullWidth variant='contained' color='primary' onClick={nextPage}>
                    Next Page
                </Button>
            </div>
        </div>
    )
}

export default PageOne;

Answer 1

您可以执行以下操作：

newEvent.UID = 123;

使用useFormik钩子仅验证Formik表单的一部分

1 个答案: