为何type为number的输入框值类型为string？如何修复？

即使给input设置了type="number"，HTML原生依然会把输入值以字符串形式返回，这是默认行为，你可以通过以下几种方法将其转换为数值类型：

• 方法一：使用parseFloat转换（适合价格这类浮点数场景）
  修改你的handlePrice函数，将字符串转为浮点数，同时处理空输入的情况：

  const [price, setPrice] = useState('');
  
  const handlePrice = (event) => {
    const inputValue = event.target.value;
    const numericValue = inputValue ? parseFloat(inputValue) : '';
    console.log(typeof numericValue); // 非空时输出number
    setPrice(numericValue);
  };
  

• 方法二：使用Number()转换
  利用Number()构造函数转换，同时判断转换结果避免NaN：

  const handlePrice = (event) => {
    const numericValue = Number(event.target.value);
    // 空输入时返回空字符串，避免输入框显示0
    setPrice(isNaN(numericValue) ? '' : numericValue);
  };
  

• 方法三：使用原生valueAsNumber属性
  HTML的number类型input自带valueAsNumber属性，直接返回数值类型（空输入时为NaN）：

  const handlePrice = (event) => {
    const numericValue = event.target.valueAsNumber;
    setPrice(isNaN(numericValue) ? '' : numericValue);
  };
  

另外注意：初始state建议设为空字符串''，这样输入框默认是空的，不会显示0或NaN影响用户体验。

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