React函数组件不使用react-bootstrap实现符合规则的响应式按钮

原有代码存在语法错误+逻辑缺失，直接替换为以下代码即可满足所有交互要求：

import React, { useState } from 'react';
function Footer() {
  const [counter, setCounter] = useState(0);

  // 递增逻辑：用函数式更新避免闭包旧值问题
  const incrementCount = () => {
    setCounter(prev => prev + 1);
  };

  // 递减逻辑：最小值锁死为0
  const decrementCount = () => {
    setCounter(prev => Math.max(prev - 1, 0));
  };

  // 输入框失焦校验回退
  const handleBlur = (e) => {
    const val = parseInt(e.target.value, 10);
    // 非数字、小于0均判定为非法值，直接回退到上一次合法值
    if (isNaN(val) || val < 0) {
      e.target.value = counter;
      return;
    }
    setCounter(val);
  };

  return (
    <div className="btn-group" role="group">
      <button
        type="button"
        className="btn btn-warning"
        onClick={decrementCount}
        disabled={counter === 0}
        style={counter === 0 ? {
          opacity: 0.6,
          cursor: 'not-allowed',
          backgroundColor: '#d6d6d6',
          borderColor: '#d6d6d6'
        } : {}}
      >
        -
      </button>
      <input
        type="number"
        min="0"
        value={counter}
        className="form-control"
        onChange={(e) => setCounter(Number(e.target.value))}
        onBlur={handleBlur}
      />
      <button
        type="button"
        className="btn btn-warning"
        onClick={incrementCount}
      >
        +
      </button>
    </div>
  );
}

对应需求的实现说明 #

• 减号置灰禁用：给减号按钮绑定disabled属性，当counter === 0时自动禁用，同时追加样式实现置灰、禁止光标效果，符合交互要求。
• 加号正常递增：统一用函数式写法更新state，永远读取最新的state值做+1操作，不会出现点击后数值更新异常的问题。
• 非法值回退：输入框改为受控组件，绑定实时的counter值，监听blur事件做校验，只要输入值是负数、非数字，直接把输入框内容重置为state中存储的上一次合法值，不会污染计数状态。

注：修复了原代码的语法问题：原代码错误将return写为返回函数的形式return(){}，同时补全了未闭合的btn-group容器标签，移除了未使用的useEffect引入，将输入框min值从1调整为0匹配计数从0开始的规则。

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