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

Question

我有一个 Formik Field，我想与 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} 之类的方法，但它似乎没有用。

编辑：这是工作代码和框 link：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>
)

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

How to use React NumberFormat package in conjunction with Formik?

javascript

number-formatting

reactjs

formik