标签: react-number-format

我正在尝试使用带有 NumberFormat 的 React hook 形式，无需 Controller 且无需 ReactDOM.findDOMNode （已弃用和不鼓励）。以下代码有效

import React from 'react';
import ReactDOM from 'react-dom';
import { useForm } from 'react-hook-form';
import NumberFormat from 'react-number-format';

function FormWorking() {
  const { register, handleSubmit, getValues } = useForm();

  function onSubmit() {
    console.log(getValues());
  }

  const cardNumberReg = register('cardNumber');
  
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <NumberFormat
          format="#### #### #### ####"
          {...cardNumberReg}
          ref={(inst) => (cardNumberReg.ref(ReactDOM.findDOMNode(inst)))}
      />
    </form>
  );
}

ReactDOM.render(
  <FormWorking />, document.getElementById('root')
);

但我不想使用 findDOMNode。以下尝试均无效（cardNumber 在日志中为空或未定义）

      <NumberFormat
          format="#### #### #### ####"
          {...cardNumberReg}
          getInputRef={(e: …

我有一个 react-hook-form 表单和是的验证。我想要做的是使用 react-number-format 格式化输入，但也将浮点值传递给验证并提交。

这是代码和框：https ://codesandbox.io/s/keen-field-26ub7

在 InvoiceData.js 中有一个 react-number-format 正在使用的输入。我想根据高于 (grossValue) 的值验证此输入，但我认为如果不解析该值以再次浮动，我就无法做到这一点。

我正在使用 React-number-format 库来格式化用户提供的输入。但由于某种原因，当我保存数据时，输入被保存为字符串而不是数字。这是默认行为吗？如果是，如何将其更改为数字，以便将格式化字符串保存为数字，并删除所有字符（例如 $、逗号等）？

这就是我使用它的方式。npm 包https://www.npmjs.com/package/react-number-format

               <NumberFormat
                    thousandSeparator={true}
                    prefix={"$"}
                    decimalScale={2}
                    fixedDecimalScale
                    disabled={isDisabled}
                 />

我已经InputComponent使用react-number-format. 此组件仅接受带一位小数的字符串数值。示例："12.5"or"12"但不是"12.55"。这有效。

但是，当我使用InputComponent构建另一个组件 ( BiggerComponent) 时，输入会失去对每个击键的关注。

https://codesandbox.io/s/festive-ishizaka-bvktl