如何不使用Controller与findDOMNode集成React Hook Form与NumberFormat

解决方法 #

react-number-format 提供的 getInputRef 属性就是专门用来获取内部真实input DOM节点的，你之前的写法出错是因为直接把 register 返回的所有属性展开给 NumberFormat 时，ref 属性会被优先作用到 NumberFormat 组件实例本身，而非内部输入框。我们只需要拆分 register 返回的属性，把ref单独传给 getInputRef 即可，不需要使用Controller也不需要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());
  }

  // 拆分register返回的ref和其他表单绑定属性
  const { ref: cardNumberRef, ...cardNumberRest } = register('cardNumber');
  
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <NumberFormat
          format="#### #### #### ####"
          {...cardNumberRest}
          // 将register需要的ref绑定到内部真实input节点
          getInputRef={cardNumberRef}
      />
      <button type="submit">提交</button>
    </form>
  );
}

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

内容的提问来源于stack exchange，提问作者Peter