Primereact InputNumber不支持ref？求无状态取值方案

直接给InputNumber组件加ref没用，因为它是封装后的React组件，你绑定的ref指向的是组件实例，不是内部的原生输入框元素，默认情况下组件不会把内部input的ref暴露出来。

下面给你两种不用state和onChange就能获取值的方法：

方法一：用组件自带的inputRef属性获取原生输入框 #

PrimeReact的InputNumber专门提供了inputRef属性，用来直接绑定内部原生input元素的ref：

1. 先创建ref：

const fooAmountRef = useRef(null);

2. 给InputNumber组件传入inputRef：

<InputNumber
  type="tel"
  value={selectedData.fooAmount}
  placeholder={t('dialog.foo_amount')}
  inputRef={fooAmountRef}
/>

3. 之后需要获取值时，直接从原生input上取：

// 获取输入的原始字符串，转成数字可以用Number()或parseFloat()
const inputValue = fooAmountRef.current?.value;
const numericValue = inputValue ? Number(inputValue) : 0;

方法二：通过组件实例的getValue()方法获取处理后的值 #

如果需要组件处理后的标准数字值（比如自动过滤非数字字符、处理小数位数等），可以直接获取InputNumber的组件实例，调用它的getValue()方法：

1. 创建ref：

const fooAmountRef = useRef(null);

2. 给InputNumber组件绑定ref：

<InputNumber
  type="tel"
  value={selectedData.fooAmount}
  placeholder={t('dialog.foo_amount')}
  ref={fooAmountRef}
/>

3. 获取值时调用组件实例的方法：

// getValue()会返回组件处理后的数字，没有输入时可能返回null或undefined，注意处理
const currentValue = fooAmountRef.current?.getValue() ?? 0;

这两种方法都不需要依赖state和onChange事件，直接通过ref就能拿到你要的输入值。

内容的提问来源于stack exchange，提问作者user22357236