如何结合 Formik 使用 React NumberFormat 包？

Posted 2023-04-13

【中文标题】如何结合 Formik 使用 React NumberFormat 包？

【英文标题】：How to use React NumberFormat package in conjunction with Formik?

【发布时间】：2020-11-26 11:09:09

【问题描述】：

我有一个 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

【问题讨论】：

请自带一个可以工作的sn-p，如果你有一个sn-p可以清楚地显示你的问题，它会比没有sn-p更快地解决你的问题，例如，你可以从代码沙箱创建一个 sn-p

@NishargShah 我已按照建议添加了 sn-p。

@Darner 已经添加了答案，如果您对该答案不满意，请标记我，我会留意

【参考方案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>
)

【讨论】：

谢谢它的工作。使用组件 prop 方法，我可以将自定义属性（如样式类）从 Field 组件传递给 NumberField 组件吗？

当然，只是不要忘记在组件本身中引用它们。正如文档所说，所有额外的道具都将通过。

@Datner 你能看看我关于formik和数字格式的问题吗？ ***.com/questions/68888296/…