解决HTML input type="number" 值仍为字符串的问题

import React, { useState } from 'react';

function PriceInputComponent() {
    const [price, setPrice] = useState(); // price的初始类型未定义，但期望是数字

    const handlePrice = (event) => {
        console.log("Input value:", event.target.value); // 始终是字符串
        console.log("Input value type:", typeof event.target.value); // 始终是'string'
        setPrice(event.target.value); // 此时price状态存储的是字符串
    };

    return (
        <div className="col-md-6">
            <label htmlFor="inputPrice" className="form-label">Price</label>
            <input
                value={price}
                onChange={handlePrice}
                type="number" // 尽管这里是number
                className="form-control"
                id="inputPrice"
            />
        </div>
    );
}

const handlePrice = (event) => {
    const inputValue = event.target.value;
    const numericValue = Number(inputValue); // 将字符串转换为数字
    console.log("Converted value:", numericValue);
    console.log("Converted value type:", typeof numericValue); // 'number'
    setPrice(numericValue);
};

// 对于整数
const handlePriceInt = (event) => {
    const inputValue = event.target.value;
    const intValue = parseInt(inputValue, 10); // 始终指定基数10
    console.log("Parsed integer:", intValue);
    setPrice(intValue);
};

// 对于浮点数
const handlePriceFloat = (event) => {
    const inputValue = event.target.value;
    const floatValue = parseFloat(inputValue);
    console.log("Parsed float:", floatValue);
    setPrice(floatValue);
};

const handlePrice = (event) => {
    const inputValue = event.target.value;
    const numericValue = inputValue * 1; // 字符串乘以1，隐式转换为数字
    console.log("Multiplied value:", numericValue);
    console.log("Multiplied value type:", typeof numericValue); // 'number'
    setPrice(numericValue);
};

import React, { useState } from 'react';

function PriceInputComponent() {
    const [price, setPrice] = useState(''); // 初始值设为空字符串，避免null或undefined的渲染警告

    const handlePrice = (event) => {
        const rawValue = event.target.value;
        // 推荐使用 Number() 进行转换
        let numericValue = Number(rawValue);

        // 进一步处理：如果用户清空了输入框，我们可能希望将状态设为空字符串或0
        if (rawValue === '') {
            numericValue = ''; // 或者设置为0，根据业务需求
        }

        // 检查是否是有效的数字，如果不是，可能需要给出提示或保持旧值
        if (isNaN(numericValue) && rawValue !== '') { // 排除空字符串导致NaN的情况
            console.error("Invalid input: Not a number");
            // 可以在这里显示错误消息给用户
            return; // 不更新状态
        }

        console.log("Final numeric value:", numericValue, "Type:", typeof numericValue);
        setPrice(numericValue);
    };

    return (
        <div className="col-md-6">
            <label htmlFor="inputPrice" className="form-label">Price</label>
            <input
                value={price} // 绑定到状态
                onChange={handlePrice}
                type="number"
                className="form-control"
                id="inputPrice"
                placeholder="Enter price"
            />
            {isNaN(price) && price !== '' && <p style={{ color: 'red' }}>Please enter a valid number.</p>}
            <p>Current price in state: {price === '' ? 'Empty' : price} (Type: {typeof price})</p>
        </div>
    );
}

export default PriceInputComponent;