如何用 React 构建功能完整的 BMI 计算器

使用 React 构建 BMI 计算器需要拆分功能模块，核心包含用户输入区域、计算逻辑处理、结果展示三个部分，整体采用函数组件配合 hooks 管理状态，结构清晰且易于维护。

项目需求梳理

BMI 计算器的核心功能是根据用户输入的身高和体重，按照公式计算出 BMI 数值，并根据数值给出对应的健康分类。具体需求如下：

• 支持输入身高（单位：厘米）和体重（单位：千克）
• 输入内容需要校验，避免非数字、负数、空值等无效输入
• 点击计算按钮后触发 BMI 计算逻辑
• 展示计算结果以及对应的健康分类说明

核心计算逻辑

BMI 的计算公式为：BMI = 体重(kg) / (身高(m) * 身高(m))，其中身高需要先将厘米转换为米。根据计算结果的不同区间，健康分类如下：

组件结构设计

我们将整个计算器拆分为三个核心组件：

• BmiCalculator：根组件，负责整体状态管理和组件组合
• InputForm：输入表单组件，负责接收身高和体重输入
• ResultDisplay：结果展示组件，负责展示计算后的 BMI 值和分类

完整代码实现

根组件 BmiCalculator

根组件使用 useState 管理身高、体重、计算结果、错误提示等状态，同时定义计算 BMI 的核心函数。

import React, { useState } from 'react';
import InputForm from './InputForm';
import ResultDisplay from './ResultDisplay';

const BmiCalculator = () => {
  // 身高状态，单位厘米
  const [height, setHeight] = useState('');
  // 体重状态，单位千克
  const [weight, setWeight] = useState('');
  // 计算结果
  const [bmiResult, setBmiResult] = useState(null);
  // 错误提示
  const [error, setError] = useState('');

  // 计算 BMI 的函数
  const calculateBmi = () => {
    // 清空之前的错误和结果
    setError('');
    setBmiResult(null);

    // 输入校验
    const heightNum = parseFloat(height);
    const weightNum = parseFloat(weight);
    if (!height || !weight) {
      setError('请输入身高和体重');
      return;
    }
    if (isNaN(heightNum) || isNaN(weightNum)) {
      setError('请输入有效的数字');
      return;
    }
    if (heightNum <= 0 || weightNum <= 0) {
      setError('身高和体重必须为正数');
      return;
    }

    // 转换身高为米
    const heightMeter = heightNum / 100;
    // 计算 BMI
    const bmi = weightNum / (heightMeter * heightMeter);
    // 保留两位小数
    const roundedBmi = Math.round(bmi * 100) / 100;

    // 判断健康分类
    let category = '';
    if (roundedBmi < 18.5) {
      category = '偏瘦';
    } else if (roundedBmi >= 18.5 && roundedBmi <= 23.9) {
      category = '正常';
    } else if (roundedBmi >= 24 && roundedBmi <= 27.9) {
      category = '超重';
    } else {
      category = '肥胖';
    }

    // 更新结果状态
    setBmiResult({
      bmi: roundedBmi,
      category: category
    });
  };

  return (
    <div className="bmi-calculator">
      <h2>React BMI 计算器</h2>
      <InputForm
        height={height}
        weight={weight}
        setHeight={setHeight}
        setWeight={setWeight}
        calculateBmi={calculateBmi}
        error={error}
      />
      <ResultDisplay result={bmiResult} />
    </div>
  );
};

export default BmiCalculator;

输入表单组件 InputForm

该组件负责渲染输入输入框、计算按钮，同时展示错误提示信息，通过 props 接收根组件传递的状态和更新函数。

import React from 'react';

const InputForm = ({ height, weight, setHeight, setWeight, calculateBmi, error }) => {
  return (
    <div className="input-form">
      <div className="form-item">
        <label>身高（厘米）：</label>
        <input
          type="text"
          value={height}
          onChange={(e) => setHeight(e.target.value)}
          placeholder="请输入身高"
        />
      </div>
      <div className="form-item">
        <label>体重（千克）：</label>
        <input
          type="text"
          value={weight}
          onChange={(e) => setWeight(e.target.value)}
          placeholder="请输入体重"
        />
      </div>
      {error && <p className="error-text">{error}</p>}
      <button onClick={calculateBmi}>计算 BMI</button>
    </div>
  );
};

export default InputForm;

结果展示组件 ResultDisplay

该组件接收根组件传递的计算结果，当结果存在时展示 BMI 数值和健康分类，不存在时不渲染内容。

import React from 'react';

const ResultDisplay = ({ result }) => {
  if (!result) {
    return null;
  }

  return (
    <div className="result-display">
      <h3>计算结果</h3>
      <p>您的 BMI 值为：<strong>{result.bmi}</strong></p>
      <p>健康分类：<strong>{result.category}</strong></p>
    </div>
  );
};

export default ResultDisplay;

使用说明

将上述三个组件放在同一目录下，在入口文件中引入 BmiCalculator 组件即可运行。如果需要调整样式，可以给对应的 div、input、button 等标签添加 className，编写对应的 CSS 样式即可。整个项目没有依赖额外的第三方库，仅使用 React 内置的 hooks 即可实现全部功能，适合新手理解 React 状态流转和组件通信的基本逻辑。

ReactBMI_计算器前端开发组件化修改时间：2026-07-02 23:30:37