タイトルを「react-hook-form での無効なフック呼び出し」に書き換えました。

Question

<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>

Answer 1

NumberInput コンポーネントを個別に定義し、Controller パッケージを次の形式で直接使用します。 リーリー

次に、

useForm を呼び出すコンポーネント内: リーリー

詳細については、

この記事をご覧ください。