如何在Formik表单中集成使用React Number Format数字格式化组件

你需要将NumberFormat的输入状态同步到Formik的状态管理中，同时补充对应的校验和错误提示逻辑，完整调整后的代码如下：

const NewProduct = ({}) => {
    const validate = (values) => {
        const errors = {}
        if (!values.title) {
            errors.title = '必填'
        }
        // 新增price字段校验规则
        if (!values.price) {
            errors.price = '必填'
        } else if (Number(values.price) <= 0) {
            errors.price = '价格必须大于0'
        }
        return errors
    }
    const formik = useFormik({
        initialValues: {
            title: '',
            price: '',
        },
        validate,
        onSubmit: (values) => {
            alert(JSON.stringify(values, null, 2))
        },
    })

    return (
        <div className="newProductComponent">
            <form onSubmit={formik.handleSubmit}>
                <label>title</label>
                <input
                    type="text"
                    id="title"
                    name="title"
                    onChange={formik.handleChange}
                    onBlur={formik.handleBlur}
                    value={formik.values.title}
                />
                {formik.touched.title && formik.errors.title ? (
                    <div className="error">{formik.errors.title}</div>
                ) : null}

                <label>价格</label>
                <NumberFormat
                    name="price" // 新增name属性，和Formik字段名对应
                    value={formik.values.price}
                    thousandSeparator={true}
                    onValueChange={(values) => {
                        const { value } = values
                        // 同步数值到Formik的price字段
                        formik.setFieldValue('price', value)
                    }}
                    onBlur={formik.handleBlur} // 新增blur事件，触发touched状态
                />
                {/* 新增price的错误提示 */}
                {formik.touched.price && formik.errors.price ? (
                    <div className="error">{formik.errors.price}</div>
                ) : null}
                {/* 提交按钮触发表单逻辑 */}
                <button type="submit">提交</button>
            </form>
        </div>
    )
}

核心改动说明 #

• 给NumberFormat组件添加name="price"属性，和Formik定义的字段名保持一致
• 在onValueChange回调中调用formik.setFieldValue方法，将输入的纯数值同步到Formik的状态中，你也可以根据业务需求选择存储格式化后的formattedValue
• 绑定onBlur={formik.handleBlur}触发字段的touched状态，避免用户还未输入就提前显示错误提示
• 完善validate函数，补充price字段的校验规则，支持必填、数值范围等自定义校验逻辑
• 新增price字段对应的错误提示UI，逻辑和title字段保持一致
• 补充提交按钮，触发表单提交逻辑

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