我刚接触react hook form，所以这可能是一个简单的问题。我刚刚发现Controllers不能使用value作为数字。这让我很恼火，但我最终发现了这个github问题#8068，它描述了解决方案，设置一个onChange函数如下：

<Controller
-    rules={{ valueAsNumber: true }}
      render={({ field }) => (
          <input
-             onChange={field.onChange}
+             onChange={(event) => field.onChange(+event.target.value)}
              type="number"
          />
  )}
/>

所以我做了些小改动，得到了这个代码

import React, { ChangeEvent } from 'react'
import { Controller } from 'react-hook-form'
import { getPlaceholder } from './getPlaceholder'
import { IInput } from './types'

const NumberInput: React.FC<IInput> = ({ control, name, ...props }) => {
  const placeholder = getPlaceholder({ type: "number" });
  const numericalOnChange = (event: ChangeEvent<HTMLInputElement>) => {
    if (event.target.value === '') return null;
    return +event.target.value;
  }

  return (
    <Controller
      control={control}
      name={name}
      render={({ field: { onChange, ...field } }) => (
        <input
          {...props}
          {...field}
          type="number"
          placeholder={placeholder}
          onChange={(event) => {
            const value = numericalOnChange(event)
            onChange(value)
          }}
          className="h-[20px] pl-[4px] py-[8px] bg-transparent border-b
          border-b-[#646464] focus:border-b-[#3898EC] text-[13px]
          text-[#F00] placeholder-[#646464] outline-none m-1 w-full"
        />
      )}
    />
  )
}

export default NumberInput

这在理论上应该工作，但最终提供了一个无效的钩子调用错误。