( 標題重寫為:"react-hook-form中的Hook呼叫無效"-PHP中文網路問答
標題重寫為:"react-hook-form中的Hook呼叫無效"
P粉752479467
P粉752479467 2023-08-31 11:51:28
0
1
528

我對react hook form還不熟悉,所以可能是個簡單的問題。我剛剛發現Controller無法將value作為數字使用。這讓我很煩惱,但最終我在github的問題#8068中找到了解決方案,描述如下:設定一個onChange函數,像這樣:

 (  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 = ({ control, name, ...props }) => { const placeholder = getPlaceholder({ type: "number" }); const numericalOnChange = (event: ChangeEvent) => { if (event.target.value === '') return null; return event.target.value; } return (  (  { 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。

P粉752479467
P粉752479467

全部回覆 (1)
P粉567112391

NumberInput元件單獨定義,然後在表單內直接使用Controller包裝:

// NumberInput.js export const NumberInput = ({ value, onChange, ...rest }) => { const handleChange = (e) => { onChange(Number(e.target.value)); }; return (  ); };

然後在呼叫useForm的元件內:

 (  )} />

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

    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!