“mui-one-time-password-input”不适用于“formik”

Question

我正在开发一个 Next.js 项目，我必须使用

mui-one-time-password-input

库进行 OTP 输入。对于表单验证，我使用

formik

。

现在，当我尝试将

value

和

onChange

属性应用于

MuiOtpInput

组件时；不知何故，它不接受我在 MuiOtpInput 字段中提供的任何输入。

const OtpForm = () => {
    const formik = useFormik({
        initialValues: {
            otp: null,
            submit: null
        },
        validationSchema: Yup.object({
            otp: Yup
                .string()
                .length(6, 'Must be a valid OTP')
                .required('OTP is required')
        })
    });

    return (
        <form>
            <MuiOtpInput
                TextFieldsProps={{
                    placeholder: '-'
                }}
                onComplete={formik.handleSubmit}
                onChange={formik.handleChange}
                value={formik.values.otp}
                length={OTP_LENGTH}
            />
        </form>
    );
};

这虽然有效...

const OtpForm = () => {
    const [otp,setOtp] = useState('')

    return (
        <form>
            <MuiOtpInput
                TextFieldsProps={{
                    placeholder: '-'
                }}                
                onChange={(val) => setOtp(val)}
                value={otp}
                length={OTP_LENGTH}
            />
        </form>
    );
};

Answer 1

MuiOtpInput 似乎缺乏对“name”属性的支持，这可能会导致问题。要解决此问题，您可以使用 formik.setFieldValue(fieldName, value)，这是一个示例代码片段：

const OtpForm = () => {
    const formik = useFormik({
        initialValues: {
            otp: null,
            submit: null
        },
        validationSchema: Yup.object({
            otp: Yup
                .string()
                .length(6, 'Must be a valid OTP')
                .required('OTP is required')
        })
    });

    return (
        <form>
            <MuiOtpInput
                TextFieldsProps={{
                    placeholder: '-'
                }}
                onComplete={formik.handleSubmit}
                onChange={(value) => formik.setFieldValue("otp", value)}
                value={formik.values.otp}
                length={OTP_LENGTH}
            />
        </form>
    );
};