标题重写为："react-hook-form中的Hook调用无效"
<p>我对react hook form还不熟悉，所以可能是一个简单的问题。我刚刚发现Controller无法将value作为数字使用。这让我很烦恼，但最终我在github的问题#8068中找到了解决方案，描述如下：设置一个onChange函数，像这样：</p>
<pre class="brush:php;toolbar:false;"><Controller
- rules={{ valueAsNumber: true }}
render={({ field }) => (
<input
- onChange={field.onChange}
+ onChange={(event) => field.onChange(+event.target.value)}
type="number"
/>
)}
/></pre>
<p>所以我稍微修改了一下，得到了以下代码：</p>
<pre class="brush:php;toolbar:false;">import React, { ChangeEvent } from 'react'
import { Controller } from 'react-hook-form'
import { getPlaceholder } from './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</pre>
<p>理论上应该可以工作，但实际上会提供一个Invalid Hook Call Error。</p>
1
842
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
将
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" /> )} />你可以在 这篇文章 中找到更多信息。