React.js自定义增减量数量选择器如何开启手动数值输入功能

你的输入框无法修改是因为你用了React受控组件的写法，只给input绑定了value属性，没有绑定对应的onChange事件处理函数，用户输入的内容无法同步到组件的qty状态里，自然看不到修改效果。

实现手动输入的修改方案如下：

核心改动点 #

• 新增输入校验函数，处理用户手动输入的内容，只允许输入0到max范围内的合法数字
• 给input绑定onChange事件，把用户输入的合法值同步到状态
• 优化原有的增减按钮逻辑，不用重定义函数，直接在状态更新时做边界判断，性能更好

修改后完整代码 #

import { useState } from 'react';
// 假设Button是你已经引入的自定义组件
const Quantity = ({max}) => {
    const [qty, setQty] = useState(0);

    // 处理减按钮点击
    const decreaseQty = () => {
        setQty(prev => Math.max(0, prev - 1));
    };

    // 处理加按钮点击
    const increaseQty = () => {
        setQty(prev => Math.min(max, prev + 1));
    };

    // 处理手动输入
    const handleInputChange = (e) => {
        const inputVal = e.target.value;
        // 允许空输入自动置为0，不需要可以删除该分支
        if (inputVal === '') {
            setQty(0);
            return;
        }
        // 转成数字校验合法性
        const num = Number(inputVal);
        // 是整数且在合法区间才更新状态
        if (!isNaN(num) && Number.isInteger(num) && num >= 0 && num <= max) {
            setQty(num);
        }
    };

    return (
       <div>
            <Button onClick={decreaseQty}> - </Button>
            {/* 改成number类型更友好，自带数字键盘和基础校验 */}
            <input  
                type="number"
                min={0}
                max={max}
                value={qty}
                onChange={handleInputChange}
            />
            <Button onClick={increaseQty}> + </Button>        
        </div>
    )
 }

 export default Quantity

补充说明 #

如果你允许输入小数，删除校验逻辑里的Number.isInteger(num)判断即可；如果不允许用户清空输入框为空，删掉对应空值处理分支就可以。

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