如何将 React NumberFormat package 与 Formik 结合使用？

Question

我有一个 Formik 字段，我想与 React NumberFormat npm package 一起使用。 这是我在 Formik 中的 FormGroup：

//...Other code
                <Formik
                    initialValues={this.state.diamondPurchaseGstDetails}
                    enableReinitialize={true}
                    onSubmit={this.formSubmit}
                >
                    {({ values, setFieldValue }) => (
                        <Form>
                                    <FormGroup>
                                        <Field
                                            className="form-control"
                                            name="CreditDays"
                                            type="text"
                                            component={ParseNumber}
                                        ></Field>
                                        <Label>Credit Days</Label>
                                    </FormGroup>
                        </Form>
//...Other code

我传递的组件是我的自定义组件ParseNumber ，它使用 NumberFormat package。 这是代码：

import React from 'react';
import NumberFormat from 'react-number-format';

function ParseNumber() {
    return (
        <NumberFormat decimalScale={0} allowNegative={false}/>
    )
}

export default ParseNumber;

现在，我的问题是如何将输入字段值绑定到values ？ 我尝试了类似value={values.CreditDays}的方法，但似乎没有用。

编辑：这是有效的代码框链接： 代码框

Answer 1

Field组件和useField钩子都分别提供有用的道具和值。 即一个名为field的 object，它包含name 、 value 、 onChange和onBlur 。 这些可以分布在您尝试绑定到 formik 的任何组件上

使用钩子（ useField ）是我的首选方法

import { useField } from 'formik'

function NumberFieldHooks(props) {
  const { name } = props
  const [field] = useField(name)
  
  return <NumberFormat {...field} decimalScale={0} allowNegative={false}/>
}

function NumberField({ field }) {
  return <NumberFormat {...field} decimalScale={0} allowNegative={false} />;
}

// later in the formik component
return (
  <Formik {...props}>
    <Form>
      {/* using the hooks form */}
      <NumberFieldHooks name="CreditDaysHooks" />

      {/* using the component prop */}
      <Field name="CreditDays" component={NumberField} />
    </Form>
  </Formik>
)