javascript - Formik - 在 1 秒后或模糊时验证输入

Question

我有一个 Formik 表单，我想在输入更改时运行验证器，但仅在更改后 1 秒更新错误。但是，如果输入是模糊的，验证应该立即进行。我怎样才能做到这一点？目前，我计划手动将 onBlur 事件传递给类似于此的每个输入：(name, e) => setLastEditedInput(name)并使用正确的名称为每个输入绑定它。目前，我的代码如下所示：

import {Formik, Form as FormikForm} from "formik";
import {useEffect, useState, useRef} from "react";

function Form({initialValues, validators, ...rest}) {
    const [lastEditedInput, setLastEditedInput] = useState(undefined);
    const prevLastEditedInputRef = useRef();
    useEffect(() => {
        prevLastEditedInputRef.current = lastEditedInput;
    });
    const prevLastEditedInput = prevLastEditedInputRef.current;

    const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

    return (
        <Formik
            initialValues={initialValues}
            validate={values => {
                function getErrors() {
                    const errors = {};

                    Object.entries(validatorsWithDefaultValidatorsAdded)
                        .forEach(([validatorKey, validator]) => {
                            const value = values[validatorKey];
                            errors[validatorKey] = validator(value);
                        });

                    return errors;
                }

                if (lastEditedInput === prevLastEditedInput) {
                    return sleep(1000).then(getErrors);
                }

                return getErrors();
            }}
            {...rest}
        >
            <FormikForm>
            </FormikForm>
        </Formik>
    );
}

该代码尚未经过测试，可能无法正常工作，但这就是想法。Formik 有没有更好的方法？

标签： javascriptformik