React中如何根据number输入框数值按规则更新对应fee费用

直接替换你的handlerFunc为以下实现即可：

const handlerFunc = (e) => {
  // 获取输入值并转为数值类型，空输入默认按0处理
  const inputNum = Number(e.target.value) || 0;
  let newFee = 2;

  if (inputNum >= 1999) {
    // 计算超出1999的部分，每满500 fee加1
    const exceed = inputNum - 1999;
    newFee = 2 + Math.floor(exceed / 500);
  }

  setFee(newFee);
};

同时注意你原有输入框的函数名拼写错误，handerFunc要改为和实现一致的handlerFunc：

<input type="number" onChange={handlerFunc} />

你可以对照以下测试场景验证计算结果是否符合要求：

• 输入值1500 → 输出fee=2
• 输入值1999 → 输出fee=2
• 输入值2499 → 输出fee=3
• 输入值2999 → 输出fee=4
• 输入值3499 → 输出fee=5

如果需要避免用户输入负数，可以给输入框添加min属性限制输入范围：

<input type="number" min="0" onChange={handlerFunc} />

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