mui-one-time-password-input与Formik集成失效：无法输入内容求助

问题原因 #

Formik的handleChange默认依赖事件对象中的target.name匹配表单字段，但MuiOtpInput的onChange回调直接返回OTP字符串值，并非标准事件对象，导致Formik无法识别要更新的字段，输入内容无法同步到Formik状态中。

解决方案 #

不要直接传递formik.handleChange给MuiOtpInput的onChange，手动封装回调函数，通过Formik的setFieldValue方法直接更新otp字段状态。

修改后的完整代码 #

const OtpForm = () => {
    const formik = useFormik({
        initialValues: {
            otp: '', // 初始值改为空字符串，适配组件的字符串类型要求
            submit: null
        },
        validationSchema: Yup.object({
            otp: Yup
                .string()
                .length(6, '必须是有效的6位OTP')
                .required('OTP不能为空')
        }),
        onSubmit: (values) => {
            // 替换为你的OTP验证逻辑
            console.log('提交的OTP:', values.otp);
        }
    });

    return (
        <form onSubmit={formik.handleSubmit}>
            <MuiOtpInput
                TextFieldsProps={{
                    placeholder: '-'
                }}
                onComplete={formik.handleSubmit}
                onChange={(otpValue) => formik.setFieldValue('otp', otpValue)}
                value={formik.values.otp}
                length={6}
            />
            {/* 显示Formik验证错误信息 */}
            {formik.touched.otp && formik.errors.otp && (
                <div style={{ color: '#dc2626', marginTop: 8, fontSize: '0.875rem' }}>
                    {formik.errors.otp}
                </div>
            )}
            <button 
                type="submit" 
                disabled={!formik.isValid || !formik.values.otp}
                style={{ marginTop: 16 }}
            >
                验证OTP
            </button>
        </form>
    );
};

关键修改点说明 #

1. 初始值调整：将otp: null改为otp: ''，MuiOtpInput的value属性期望接收字符串类型，null可能导致组件内部状态异常。
2. 自定义onChange回调：通过formik.setFieldValue('otp', otpValue)直接指定更新的字段名和值，绕开Formik默认的事件依赖逻辑，适配MuiOtpInput的回调格式。
3. 完善表单逻辑：给<form>绑定onSubmit={formik.handleSubmit}，配合onComplete事件，既支持输入完成自动提交，也支持手动点击提交按钮。
4. 错误提示优化：利用Formik的touched和errors属性，在用户交互后显示验证错误信息，提升用户体验。

内容的提问来源于stack exchange，提问作者D_Gamer