PrimeReact InputNumber如何实现空白初始状态（而非默认值0）？

针对价格输入的场景，要让InputNumber组件初始时处于空白状态，你只需要调整几个关键配置就能搞定：

• 把绑定的初始值设为undefined或null
  别给绑定的变量初始赋值0，直接设为undefined（更推荐）或者null。PrimeReact的InputNumber默认会把空输入转成0，只有当初始值是未定义/空值时，配合其他配置才能保持空白。

• 开启allowEmpty属性
  给InputNumber加上allowEmpty={true}，这个属性是核心——它会告诉组件允许输入框保持空白，而不是强制填充默认的0值。

• 处理onChange事件（可选但更稳妥）
  在回调里手动处理空输入的情况，确保输入清空时值被设回undefined/null，避免组件自动转成0。比如：

  const handlePriceChange = (e) => {
    setPrice(e.value === '' ? undefined : e.value);
  };
  

给你一个适配价格场景的完整示例：

import { useState } from 'react';
import { InputNumber } from 'primereact/inputnumber';

const PriceInput = () => {
  // 初始值设为undefined，保持输入框空白
  const [price, setPrice] = useState(undefined);

  const handleChange = (e) => {
    // 输入为空时重置为undefined，否则保留数值
    setPrice(e.value === '' ? undefined : e.value);
  };

  return (
    <InputNumber
      value={price}
      onChange={handleChange}
      min={0}
      max={99999}
      allowEmpty={true}
      // 价格场景推荐开启货币模式，自动添加符号和分隔符
      mode="currency"
      currency="USD"
      locale="en-US"
    />
  );
};

export default PriceInput;

如果你的表单要求价格为必填项，后续在提交时单独校验是否为空即可，这样既保留了友好的空白初始状态，又能满足业务规则。

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