標題重寫為："react-hook-form中的Hook呼叫無效"

Question

我對react hook form還不熟悉，所以可能是個簡單的問題。我剛剛發現Controller無法將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 } 從 'react'
import { Controller } from 'react-hook-form'
import { getPlaceholder } 從 './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

理論上應該可以工作，但實際上會提供一個Invalid Hook Call Error。

Answer 1

將 NumberInput 元件單獨定義，然後在表單內直接使用 Controller 包裝：

// NumberInput.js
export const NumberInput = ({ value, onChange, ...rest }) => {
  const handleChange = (e) => {
    onChange(Number(e.target.value));
  };
 
  return (
    <input
      type="number"
      min={0}
      onChange={handleChange}
      value={value}
      {...rest}
    />
  );
};

然後在呼叫 useForm 的元件內：

<Controller
  name='number'
  control={control}
  render={({ field: { ref, ...field } }) => (
    <NumberInput {...field} type="number" />
  )}
/>

你可以在 這篇文章 中找到更多資訊。