1

我正在尝试使用 Formik useField 钩子将简单的自定义验证（非空或最小字符）添加到作为 React 功能组件的一部分的 MUI TextField。这个可重用的组件将成为 Formik 父组件中的一部分。使用这个功能性子组件是因为它是一个可重用的组件，因此文本字段的验证应该发生在组件内，而不是父组件的 Formik 标记中的 ValidationScheme 属性，因为表单不是预定义的。如何将此自定义验证添加到子组件中的 TextField？

import React from 'react';
import { useField } from "formik";
import { TextField, TextFieldProps } from '@material-ui/core';


type FormikTextFieldProps = {
    formikKey: string,
} & TextFieldProps



const FormikTextField = ({ formikKey, ...props }: FormikTextFieldProps) => {
    const [field, meta, helpers] = useField(formikKey);

    const validate = () => {
        if(!field.value){
            helpers.setError('The field is empty')
        }
    }
    
    return (
        <>
            <TextField
                id={field.name}
                name={field.name}
                helperText={meta.touched ? meta.error : ""}
                error={meta.touched && Boolean(meta.error)}
                value={field.value}
                onChange={field.onChange}
                {...props}
            />
            {meta.touched && meta.error ? (
                <div className="error">{meta.error}</div>
            ) : null}
        </>
    )
}

export default FormikTextField
4

0 回答 0