如何将 React hook 表单与 NumberFormat (react-number-format) 集成？

Question

我正在尝试使用带有 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: any) => (cardNumberReg.ref(e))}
      />

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

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

我是新来的反应，任何帮助将不胜感激。

Answer 1

我对此的看法是使用 React hook 表单中的 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、值和名称。您可以查看文档以查看所有可用的道具。

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

这里还有一个带有工作示例的沙箱。