React表单：确保type="number"输入获取真正数值类型

import React, { useState } from 'react';

function PriceInput() {
  const [price, setPrice] = useState(''); // 初始值可以设为 '' 或 null

  const handlePriceChange = (event) => {
    const inputValue = event.target.value;
    // 使用 Number() 将字符串转换为数值
    // 如果输入为空字符串，Number('') 会得到 0
    // 如果输入是非数字字符（尽管 type="number" 会限制，但仍需考虑粘贴等情况），Number() 会得到 NaN
    setPrice(Number(inputValue));
  };

  return (
    <div className="col-md-6">
      <label htmlFor="inputPrice" className="form-label">
        Price
      </label>
      <input
        value={price} // 注意：这里通常需要处理 price 为 NaN 或 null 的情况，以避免控制台警告
        onChange={handlePriceChange}
        type="number"
        className="form-control"
        id="inputPrice"
      />
      <p>当前价格类型: {typeof price}, 值: {price}</p>
    </div>
  );
}

import React, { useState } from 'react';

function PriceInputSpecific() {
  const [price, setPrice] = useState('');

  const handlePriceChange = (event) => {
    const inputValue = event.target.value;
    // 如果只需要整数
    // setPrice(parseInt(inputValue, 10)); 

    // 如果需要浮点数
    setPrice(parseFloat(inputValue));
  };

  return (
    <div className="col-md-6">
      <label htmlFor="inputPriceSpecific" className="form-label">
        Price (Float)
      </label>
      <input
        value={price}
        onChange={handlePriceChange}
        type="number"
        className="form-control"
        id="inputPriceSpecific"
      />
      <p>当前价格类型: {typeof price}, 值: {price}</p>
    </div>
  );
}

import React, { useState } from 'react';

function PriceInputArithmetic() {
  const [price, setPrice] = useState('');

  const handlePriceChange = (event) => {
    const inputValue = event.target.value;
    // 使用乘法隐式转换
    // setPrice(inputValue * 1); 

    // 使用一元加号隐式转换
    setPrice(+inputValue); 
  };

  return (
    <div className="col-md-6">
      <label htmlFor="inputPriceArithmetic" className="form-label">
        Price (Arithmetic)
      </label>
      <input
        value={price}
        onChange={handlePriceChange}
        type="number"
        className="form-control"
        id="inputPriceArithmetic"
      />
      <p>当前价格类型: {typeof price}, 值: {price}</p>
    </div>
  );
}

import React, { useState } from 'react';

function ProductForm() {
  // 推荐将数值类型的state初始化为 null 或 0，而不是空字符串，
  // 这样可以避免在渲染时将 null 转换为 ''，方便后续计算。
  const [price, setPrice] = useState(null); 

  const handlePriceChange = (event) => {
    const rawValue = event.target.value;
    let numericValue;

    if (rawValue === '') {
      // 当输入框为空时，我们可能希望将状态设置为 null 或 0
      numericValue = null; 
    } else {
      // 尝试将字符串转换为数字
      numericValue = Number(rawValue);
      // 检查转换结果是否为 NaN (Not a Number)
      if (isNaN(numericValue)) {
        // 如果是非法数字，可以根据业务逻辑选择：
        // 1. 保持上一个有效值 (如果 state 允许)
        // 2. 设置为 null 或 0
        // 3. 抛出错误或显示警告
        console.warn('Invalid number input detected:', rawValue);
        numericValue = null; // 或者保持当前 price 状态不变
      }
    }
    setPrice(numericValue);
  };

  return (
    <div className="container mt-4">
      <div className="col-md-6">
        <label htmlFor="productPrice" className="form-label">
          产品价格
        </label>
        <input
          // 当 price 为 null 时，输入框会显示为空。
          // 当 price 为 0 时，输入框会显示 0。
          // 确保 value 属性始终能被 React 渲染，避免 undefined。
          value={price === null ? '' : price} 
          onChange={handlePriceChange}
          type="number"
          className="form-control"
          id="productPrice"
          placeholder="请输入价格"
        />
        <p className="mt-2">
          当前价格: {price === null ? '未输入' : price} (类型: {typeof price})
        </p>
        <button 
          className="btn btn-primary mt-3" 
          onClick={() => console.log('提交的价格:', price)}
          disabled={price === null || isNaN(price)} // 禁用提交按钮如果价格无效
        >
          提交
        </button>
      </div>
    </div>
  );
}

export default ProductForm;