ReactJS中如何阻止数值递减至负数？解决按钮点击异常

数据老陈

2026-5-19

解决数值无法限制在0以上的问题

我来帮你搞定这个问题！显然是你的递减按钮逻辑没加下限校验，才会出现0点击后变-1、再点又回0的奇怪情况。咱们直接修改datepicker.js里的对应代码就行：

步骤1：找到递减按钮的处理逻辑

先在datepicker.js里定位到处理减号点击的代码，大概是这样的（不同实现写法可能略有差异，但核心逻辑一致）：

// 示例：原始的递减按钮点击事件
$('.decrease-btn').on('click', function() {
  const $input = $(this).siblings('.number-input');
  let currentVal = parseInt($input.val());
  $input.val(currentVal - 1); // 这里没做任何限制，导致会出现负数
});

步骤2：添加最小值限制逻辑

只需要在更新数值前，加一个判断：只有当前数值大于0时，才允许执行递减操作，修改后的代码如下：

$('.decrease-btn').on('click', function() {
  const $input = $(this).siblings('.number-input');
  let currentVal = parseInt($input.val());
  // 新增判断：确保递减后不小于0
  if (currentVal > 0) {
    $input.val(currentVal - 1);
  }
  // 可选：如果需要给用户提示（比如已经到最小值），可以加这段
  // else {
  //   console.log('数值不能小于0');
  //   // 或者用弹窗提示：alert('已达到最小值');
  // }
});