如何结合 Formik 使用 React NumberFormat 包？

Question

我有一个 Formik 字段，我想与 React NumberFormat npm 包一起使用。这是我在 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 包。代码如下：

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} 之类的方法，但似乎没有用。

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

Answer 1

Field 组件和useField 钩子分别提供有用的道具和值。即一个名为field的对象，它包含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>
)