PrimeAreact数字输入字段，具有react钩子形式

Question

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

<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组件中，所有其他组件都可以毫无问题地填充，并且还可以显示所需的值。

我已经看到有一个性质来自于反钩形式"；valueAsNumber"；，但我还没有发现如何在控制器中使用它。

这里有人知道我该怎么解决这个问题吗？这里有人知道我该怎么解决这个问题吗？

Answer 1

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

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

编辑07/30/2022:我有它的工作，这里有两个例子：

价格示例必须介于0和250000之间。

<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)}
</>
)} />

Answer 2

我在使用Primreact InputNumber和Formik时遇到了同样的问题。

在我的案例中，InputNumber组件出现意外行为的原因是InputNumber的Primreact自定义onChange方法：

onChange?(e: InputNumberChangeParams): void 
interface InputNumberChangeParams {
originalEvent: React.SyntheticEvent;
value: number | null;
}

(与InputText onChange属性相比：onChange?: ChangeEventHandler<HTMLInputElement> | undefined(

formik.handleChange(e)期望e: React.ChangeEvent<any>，这意味着我不能将(e: InputNumberChangeParams)传递给函数。对我来说，解决方案是使用另一个函数来处理更改，并且只使用InputNumberonChange方法提供的e.value。

onChange={(e): void => {
formik.setFieldValue("fieldName", e.value);
}}