reactjs - 如何在 formik 中使用反应数字格式

Question

我的formik表格是这样的

const NewProduct = ({}) => {
    const validate = (values) => {
        const errors = {}
        if (!values.title) {
            errors.title = 'Required'
        }
        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}
                    value={formik.values.title}
                />
                {formik.errors.title ? (
                    <div className="error">{formik.errors.title}</div>
                ) : null}

                <NumberFormat
                    value={formik.values.price}
                    thousandSeparator={true}
                    onValueChange={(values) => {
                        const { formattedValue, value } = values
                    }}
                />
            </form>
        </div>
    )
}

如何获得该表单中的数字格式组件以与 formik 一起使用？

标签： reactjsformik

Answer 1

您可以使用useField和设置值useFormikContext

例子：

const [field, meta] = useField('price');
const { setFieldValue } = useFormikContext();

const isError = meta.touched && Boolean(meta.error);

<NumberFormat
  value={formik.values.price}
  thousandSeparator={true}
  onValueChange={(values) => {
      const { formattedValue, value } = values

      setFieldValue(field.name, formattedValue)
  }}
/>

{isError && <div className="error">{meta.error}</div>}