reactjs - 通过 react 增加和减少输入值

Question

我正在尝试制作一个可以增加和减少的产品计数器，我在输入中显示的产品数量的当前值带有“值”，这个想法是用户可以输入产品数量而无需使用增加或减少按钮。

问题是当我有一个介于 0-9 之间的数字并且我手动删除它(在 View 中)时它作为 NaN 值出现，并且自动增加和减少按钮停止工作，NaN 值不能被删除或者重写一个数字

import React, { useState } from 'react'

const Products: React.FC = () => {
    

    const [products, setProducts] = useState({
        count: 0
    })

    const handleChange = (e: any) => {
        
        setProducts({count: parseInt(e.target.value)})
    }

    const decrease = (e: any) => {
        if(products.count <= 0){
            return 
        }
        setProducts({count: products.count - 1})
    }

    return (
        <div>
            <input type='button' onClick={decrease}/>
            <input type='text' value={products.count} onChange={handleChange}/>
            <input type='button' onClick={() => setProducts({count: products.count + 1})}/>
            
        </div>
        
    )
}

export default Products

Answer 1

在空字符串上调用 parseInt 得到 NaN:

console.log(parseInt(''));

然后，一旦 products 设置为 NaN，对 NaN 的任何进一步数值运算也将产生 NaN.

将数字输入值(使用 Number)替换为 0，将空字符串变为 0:

setProducts({count: Math.round(Number(e.target.value) || 0}))

您还可以考虑为输入赋予属性 type="number"(仅出于语义目的和为用户提供更好的 UI - 它不会影响 JS)。