タイトルを「react-hook-form での無効なフック呼び出し」に書き換えました。
<p>フックフォームに反応するのは初めてなので、単純な質問かもしれません。コントローラーでは値を数値として使用できないことがわかりました。これにはかなり悩まされましたが、最終的には、github issue #8068 で次のように説明されている解決策を見つけました。 次のように、onChange 関数を設定します。 </p>
<pre class="brush:php;toolbar:false;"><コントローラ
- ルール={{ valueAsNumber: true }}
render={({ フィールド }) => (
<入力
- onChange={field.onChange}
onChange={(event) =>field.onChange(event.target.value)}
タイプ=「数値」
/>
)}
/>
<p>そこで、少し変更して次のコードを取得しました。 </p>
<pre class="brush:php;toolbar:false;">import React, { ChangeEvent } from 'react'
import { コントローラー } から 'react-hook-form'
import { getPlaceholder } から './getPlaceholder'
'./types' から { IInput } をインポートします
const NumberInput: React.FC<IInput> = ({ control, name, ...props }) => {
const placeholder = getPlaceholder({ type: "number" });
const NumericOnChange = (イベント: ChangeEvent<HTMLInputElement>) => {
if (event.target.value === '') は null を返します。
イベント.ターゲット.値を返します。
}
戻る （
<コントローラー
コントロール={コントロール}
名前={名前}
render={({ フィールド: { onChange, ...フィールド } }) => (
<入力
{...小道具}
{...分野}
タイプ=「数値」
プレースホルダー={プレースホルダー}
onChange={(イベント) => {
const 値 = 数値OnChange(イベント)
onChange(値)
}}
className="h-[20px] pl-[4px] py-[8px] bg-transparent border-b
ボーダー-b-[#646464] フォーカス:ボーダー-b-[#3898EC] テキスト-[13px]
テキスト-[#F00] プレースホルダー-[#646464] アウトライン-なし m-1 w-full"
/>
)}
/>
）
}
デフォルトの NumberInput</pre> をエクスポートします。
<p>これは理論的には機能するはずですが、実際には無効なフック呼び出しエラーが発生します。 </p>
