javascript - react-hook-form 7 とカスタム入力、空の値

次のカスタムInputコンポーネントがあります:

export type InputProps = {
  error?: string
} & InputHTMLAttributes<HTMLInputElement>

export const Input: FunctionComponent<InputProps> = ({ error, ...props }) => (
  <input {...props} />
)

使用法

<form onSubmit={handleSubmit(onSubmit)}>
  <Input placeholder="https://example.com" error={errors.url?.message} {...register('url')} />
  <input type="submit" />
</form>

それを使おうとすると、URL が空（空文字列）なので検証でエラーが発生します。デバッグしてみたところ、関数 register は {name: "url"} しか返さず、私には怪しいように思えます。

私は何を間違っているのですか？

編集

私はこれをコンソールで見ています

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `Home`.
    at Input (webpack-internal:///./components/input.tsx:10:11)
    at form
    at div
    at div
    at Home (webpack-internal:///./pages/index.tsx:17:90)
    at App (webpack-internal:///./pages/_app.tsx:11:11)
    at Hydrate (webpack-internal:///./node_modules/@tanstack/react-query/build/lib/Hydrate.mjs:30:3)
    at QueryClientProvider (webpack-internal:///./node_modules/@tanstack/react-query/build/lib/QueryClientProvider.mjs:47:3)
    at TRPCProvider (webpack-internal:///./node_modules/@trpc/react-query/dist/createHooksInternal-2bef4843.mjs:158:17)
    at WithTRPC (webpack-internal:///./node_modules/@trpc/next/dist/index.mjs:44:83)
    at PathnameContextProviderAdapter (webpack-internal:///./node_modules/next/dist/shared/lib/router/adapters.js:62:11)
    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:2:3325)
    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:2:6707)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:60:1)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:173:11)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:346:11)

回答 #1

エラーは、useRef を使って関数コンポーネント自体への参照を与えようとしていることを示しています。

関数コンポーネントに参照を渡すには、代わりに forwardRef を使って実装する必要があります。

あなたの側でコードとして何が実装されているかを確認できないこと以外に、エラーはまた、上記で共有した『./components/input.tsx』の入力コンポーネントにリファレンスを使用したため、『Home』コンポーネントのレンダーファンクションを確認するように指示しています。

もし提供してくれれば、コンポーネントのラップ方法やサンドボックスの編集方法を追加することはできますが、Reactの命名規則に従っていないというエラーが出る可能性の方が高いです。Reactのドキュメント内で述べられている通り；

コンポーネント名は常に大文字で始める

** つまり、コンポーネント名が Input の場合、ファイル名も Input.tsx とすべきです