React.js如何将公制BMI计算器改造为英制（英尺英寸磅）版本

英制BMI的标准计算公式为 BMI = (体重(磅) * 703) / (身高(英寸))²，你现有代码中的计算公式本身就是英制公式，之前标注为公制属于单位逻辑混淆，只需要将单一身高输入拆分为英尺、英寸两个输入源，完成单位合并即可实现需求。

具体改造步骤 #

• 拆分身高状态：将原单一height状态替换为英尺(heightFeet)、英寸(heightInch)两个独立状态，分别对应用户输入的英尺、英寸值，原体重状态可直接对应磅单位，也可重命名为weightLbs提升语义可读性
• 单位合并计算：计算时先将英尺换算为英寸（换算规则：1英尺=12英寸），和用户输入的英寸值相加得到总身高英寸数，再代入公式计算BMI
• 增加输入合法性校验：限制英寸输入范围为0-11，校验所有输入为有效正数值，避免出现计算异常
• 原有的BMI区间判断逻辑可完全复用，BMI健康分级标准和单位制无关

改造后代码示例 #

const HomeScreen = ({navigation}) => {
  // 状态调整：拆分英尺、英寸输入状态，体重单位为磅
  const [heightFeet, setHeightFeet] = useState('')
  const [heightInch, setHeightInch] = useState('')
  const [weightLbs, setWeightLbs] = useState('')
  const [resultNumber, setResultNumber] = useState(0)
  const [resultText, setResultText] = useState('')

  const handleCalculate = () => {
    // 输入值转数字并做合法性校验
    const feet = Number(heightFeet)
    const inch = Number(heightInch)
    const lbs = Number(weightLbs)

    // 拦截非法输入
    if (isNaN(feet) || isNaN(inch) || isNaN(lbs) || feet < 0 || inch < 0 || inch >= 12 || lbs <= 0) {
      setResultText('请输入有效的身高体重数值')
      setResultNumber(0)
      return
    }

    // 换算总身高为英寸单位
    const totalHeightInch = feet * 12 + inch
    // 代入英制BMI公式计算
    const bmi = (lbs * 703) / (totalHeightInch ** 2)
    setResultNumber(bmi.toFixed(2))

    // BMI分级逻辑无需修改
    if (bmi < 18.5) {
      setResultText("体重过轻")
    } else if (bmi >= 18.5 && bmi < 25) {
      setResultText("正常体重")
    } else if (bmi >= 25 && bmi < 30) {
      setResultText("超重")
    } else {
      setResultText("肥胖")
    }
  }

  // 视图层新增三个输入框即可：英尺输入框、英寸输入框、体重（磅）输入框
  // 其余跳转、重置类交互逻辑可完全复用原有实现
}

补充说明 #

• 可以给英寸输入框增加最大值限制，禁止输入11以上的数值，减少用户输入错误
• 如果后续需要支持公制/英制切换，只需要在计算分支中根据选中的单位制调整换算逻辑即可，BMI分级判断部分不需要改动
• 你之前的公制计算器如果要修正为正确逻辑，公式应调整为bmi = 体重(千克) / (身高(米))²，如果身高输入用厘米单位，公式为bmi = 体重(千克) / ((身高(厘米)/100) ** 2)，不需要乘703系数

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