提问人：Marc Fletcher 提问时间：10/11/2023 更新时间：10/11/2023 访问量：42
React Hook 表单模式验证未触发
React Hook Form pattern validation not triggering
问：
Codesandbox：https://codesandbox.io/s/trusting-glade-v44v9t?file=/src/App.js
我建立了一个表格，可以根据三个输入（蛋白质、碳水化合物和脂肪）自动计算卡路里。我希望它验证 onBlur 的输入，但它不起作用，对象始终为空。我试过设置，但无济于事。我想验证输入是否为正整数。formState.errorsmode: onBluruseForm
由于多种原因，我没有使用input type="number
答：
0赞
Alex Bond
10/11/2023
#1
模式参数仅适用于普通验证。对于库检查，您可以使用自定义验证 （） 或将 form 模式验证与 react-hook-form 一起使用validate: input => input.match(/\d*/) == null || 'Error message'ref
小注意 - 使用非字符串作为表单值并不是一个好主意。使用与字符串相同的字符串并在处理时进行转换总是更容易。在这种情况下，您不会遇到缺少方法的问题（没有）。在您的情况下，您可以使用在将字符串转换为数字并将它们相乘之前监视更改并检查验证错误。numbermatchReact.useEffect
我希望它有所帮助。
评论
0赞
Marc Fletcher
10/11/2023
我将如何进行计算？类似的东西useEffectjs useEffect(() => { const computedCalories = (parseInt(protein) || 0) * 4 + (parseInt(carbs) || 0) * 4 + (parseInt(fat) || 0) * 9; return computedCalories; }, [protein, carbs, fat]);
0赞
Alex Bond
10/13/2023
@MarcFletcher这样的东西：const [callories, setCallories] = React.useState(0); React.useEffect(()=>{ if(formErrors) return; setCallories(parseInt(protein) * 4 + parseInt(carbs) * 4 + parseInt(fat) * 9); }, [protein, carbs, fat])
评论