带有 react-hook-form 的 PrimeReact 数字输入字段答案

【问题标题】：PrimeReact number input field with react-hook-form带有 react-hook-form 的 PrimeReact 数字输入字段
【发布时间】：2022-07-30 20:52:16
【问题描述】：

我的应用程序中目前有以下代码：

 <Controller defaultValue={0.0} name={"create_lng"}
             control={createControl} rules={{
             required: {value: true, message: t("pleaseSiteLng")}
              }} 
             render={({field, fieldState}) => (
              <InputNumber minFractionDigits={2}
                           mode={"decimal"}
                           className={classNames(                                                                    
                            {"p-invalid": createErrors.create_lng})}
                           id={field.name} {...field} />
)}/>

现在我希望能够输入定义的十进制数字。但是，只要我在输入字段中输入任何内容，偶数，值就会变为 NaN 并显示出来。这只发生在 InputNumber 组件中，所有其他组件都可以毫无问题地填充并显示所需的值。

我已经看到 react-hook-form "valueAsNumber" 中有一个属性，但我还没有找到任何如何在控制器中使用它的方法。

这里有人知道我该如何解决这个问题吗？这里有人知道我该如何解决这个问题吗？

【问题讨论】：

好的，我在下面更新了我的答案以包含示例。

标签： reactjs react-hook-form primereact

【解决方案1】：

我已经更新了这张票：https://github.com/primefaces/primereact/issues/2547

如果 InputNumber 不像您看到的那样简单，我认为需要展示如何将 InputNumber 与 React Hook Forms 一起使用。

编辑 2022 年 7 月 30 日： 我有它的工作，这里有两个例子：

价格示例必须介于 0 到 250,000 之间。

<Controller name="price" control={control} rules={{ required: 'Price is required.', min: 0, max: 250000 }} render={({ field, fieldState }) => (
   <>
      <label htmlFor={field.name} className={classNames({ 'p-error': errors.price })}>Price*</label>
      <InputNumber id={field.name} ref={field.ref} value={field.value} onBlur={field.onBlur} onValueChange={(e) => field.onChange(e)} mode="currency" currency="USD" locale="en-US" inputClassName={classNames({ 'p-invalid': fieldState.error })} />
      {getFormErrorMessage(fieldState)}
  </>
)} />

年份示例必须在 1970-2030 年之间：

<Controller name="year" control={control} rules={{ required: 'Year is required.', min: 1970, max: 2050 }} render={({ field, fieldState }) => (
  <>
      <label htmlFor={field.name} className={classNames({ 'p-error': errors.year })}>Year*</label>
      <InputNumber id={field.name} ref={field.ref} value={field.value} onBlur={field.onBlur} onValueChange={(e) => field.onChange(e)} useGrouping={false} inputClassName={classNames({ 'p-invalid': fieldState.error })} />
      {getFormErrorMessage(fieldState)}
   </>
)} />

【讨论】：