使用React的BMI计算器

在本文中，我们将使用ReactJS框架创建一个BMI计算器应用程序。BMI计算器通过身高和体重之间的关系来计算。它根据一个数值将个体分类为偏瘦、正常体重、超重和肥胖。

计算BMI的公式是：

BMI = Weight(kg)/(Height(m))^2

BMI的分类如下：

体重过轻： BMI小于18.5
正常体重： BMI介于18.5和25之间
超重： BMI介于25和29.9之间
肥胖： BMI大于30

让我们来看看我们的最终项目会是什么样子：

使用React的BMI计算器

使用的技术/先决条件：

ReactJS
CSS
JSX
React中的函数组件

方法：

该应用程序基本上是通过函数组件开发的，并根据需要管理状态。该应用程序从最终用户那里获取输入，如厘米高度、千克重量，并计算BMI得分，并向用户提供关于他/她是否体重过轻、正常或肥胖的信息。这个计算和给出消息的逻辑是使用JSX实现的。它以高度和体重作为输入，计算BMI得分并给出关于体型的消息。我们将所有的代码都放在App.js文件中，这使得代码非常易于理解。采用了简单的方法来开发此应用程序。

创建应用程序的步骤：

步骤1： 在VSCode IDE中使用下面的命令设置React项目。

npx create-react-app <<name of project>>

步骤2： 通过执行以下命令导航到新创建的项目文件夹。

cd <<Name_of_project>>

步骤3： 将以下代码插入到 App.js 和 styles/App.css 文件中，这些文件在上述目录结构中有提到。

package.json 中的依赖项将如下所示： this：

{
  "name": "bmi_cal",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
},

项目结构：

使用React的BMI计算器

示例： 在各自的文件中编写以下代码（每个代码块的第一行都提到了文件的名称）

index.html： 这是一个在public文件夹中自动生成的文件，我们只需在其标签中导入图标包。
App.js： App.js文件代码是BMI计算器应用程序的主要逻辑，其中使用了钩子（useState）来管理高度、体重、BMI值和BMI文本的状态。点击“点击计算BMI”按钮后，根据用户输入计算出BMI值，并根据此BMI值向用户提供反馈信息。
App.css： 这是样式文件，使应用程序更具吸引力，我们提供了一些样式属性，如文本、按钮等颜色。总的来说，所有的样式都是通过此文件进行管理的。

//App.js 
import React, { useState } from 'react'; 
import './App.css'; 
  
function BmiCalculator() { 
    const [heightValue, setHeightValue] = useState(''); 
    const [weightValue, setWeightValue] = useState(''); 
    const [bmiValue, setBmiValue] = useState(''); 
    const [bmiMessage, setBmiMessage] = useState(''); 
  
    const calculateBmi = () => { 
        if (heightValue && weightValue) { 
            const heightInMeters = heightValue / 100; 
            const bmi = (weightValue / (heightInMeters * heightInMeters)).toFixed(2); 
            setBmiValue(bmi); 
  
            let message = ''; 
            if (bmi < 18.5) { 
                message = 'You are Underweight'; 
            } else if (bmi >= 18.5 && bmi < 25) { 
                message = 'You are Normal weight'; 
            } else if (bmi >= 25 && bmi < 30) { 
                message = 'You are Overweight'; 
            } else { 
                message = 'You are Obese'; 
            } 
            setBmiMessage(message); 
        } else { 
            setBmiValue(''); 
            setBmiMessage(''); 
        } 
    }; 
  
    return ( 
        <div className="container"> 
            <h1>GeeksforGeeks BMI Calculator</h1> 
            <div className="input-container"> 
                <label htmlFor="height">Enter Your Height (cm):</label> 
                <input 
                    type="number"
                    id="height"
                    value={heightValue} 
                    onChange={(e) => setHeightValue(e.target.value)} 
                /> 
            </div> 
            <div className="input-container"> 
                <label htmlFor="weight">Enter Your Weight (kg):</label> 
                <input 
                    type="number"
                    id="weight"
                    value={weightValue} 
                    onChange={(e) => setWeightValue(e.target.value)} 
                /> 
            </div> 
            <button className="calculate-btn" onClick={calculateBmi}> 
                Click to Calculate BMI 
            </button> 
            {bmiValue && bmiMessage && ( 
                <div className="result"> 
                    <p> 
                        Your BMI: <span className="bmi-value">{bmiValue}</span> 
                    </p> 
                    <p> 
                        Result: <span className="bmi-message">{bmiMessage}</span> 
                    </p> 
                </div> 
            )} 
        </div> 
    ); 
} 
  
export default BmiCalculator;

CSS

/* App.cs */
.container { 
    max-width: 400px; 
    margin: 0 auto; 
    padding: 20px; 
} 
  
h1 { 
    color: #1eff00f3; 
    text-align: center; 
    margin-bottom: 20px; 
} 
  
.input-container { 
    margin-bottom: 10px; 
} 
  
label { 
    display: block; 
    font-weight: bold; 
    margin-bottom: 5px; 
} 
  
input[type='number'] { 
    width: 100%; 
    padding: 10px; 
    font-size: 16px; 
} 
  
.calculate-btn { 
    display: block; 
    width: 100%; 
    padding: 10px; 
    background-color: #007bff; 
    color: #fff; 
    font-size: 16px; 
    border: none; 
    border-radius: 4px; 
    cursor: pointer; 
} 
  
.result { 
    margin-top: 20px; 
    padding: 10px; 
    background-color: #f0f0f0; 
    border-radius: 4px; 
} 
  
.bmi-value { 
    font-weight: bold; 
} 
  
.bmi-message { 
    color: #007bff; 
    font-weight: bold; 
}

运行该应用程序的步骤：

1. 在你的 VS Code IDE 终端中输入以下命令。