如何将 React 挂钩表单与 NumberFormat（react-number-format）集成？

Question

我正在尝试在没有控制器且没有 ReactDOM.findDOMNode 的情况下使用带有 NumberFormat 的 React 钩子形式（已弃用和不鼓励）。以下代码有效

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。 None 以下尝试有效（cardNumber 在日志中为空或未定义）

      <NumberFormat
          format="#### #### #### ####"
          {...cardNumberReg}
          getInputRef={(e: any) => (cardNumberReg.ref(e))}
      />

      <NumberFormat
          format="#### #### #### ####"
          {...cardNumberReg}
          ref={cardNumberReg.ref}
      />

      <NumberFormat
          format="#### #### #### ####"
          {...cardNumberReg}
          ref={(e) => cardNumberReg.ref(e)}
      />

我是 React 新手，如有任何帮助，我们将不胜感激。

Answer 1

我对此的看法是使用 React 钩子形式的 Controller 组件，在这种情况下，您将 NumberFormat 作为受控组件处理，您需要执行以下操作：

import { useForm, Controller } from "react-hook-form";
import NumberFormat from "react-number-format";

export default function App() {
  const {
    control,
    handleSubmit,
    formState: { errors }
  } = useForm();

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        control={control}
        name="cardNumber"
        render={({ field: { onChange, name, value } }) => (
          <NumberFormat
            format="#### #### #### ####"
            name={name}
            value={value}
            onChange={onChange}
          />
        )}
      />
      <input type="submit" />
    </form>
  );
}

基本上你需要传递来自 useForm() 函数的控制值并给控制器一个名字，在你的例子中是 cardNumber，之后你将在控制器中使用一个渲染函数，你的 NumberFormat 控制器将使用时，请注意 render prop 是一个函数，它为您提供所有必要的值以使您的输入有效，例如 onChange、值和名称。您可以查看 docs 以查看所有可用的道具。

请记住，通常您希望对每个输入都使用寄存器功能，但在某些情况下 UI 库使用控制器来控制输入是最好的主意

还有一个 sandbox 和一个工作示例。

如何将 React 挂钩表单与 NumberFormat（react-number-format）集成？

How do I integrate React hook form with NumberFormat (react-number-format)?

reactjs

react-hook-form

react-number-format