使用 React 构建 BMI 计算器

src/│├── assets/│   └── images/│       └── bmi logo.png├── components/│   └── bmicalculator.jsx├── app.jsx├── app.css└── index.css

import { usestate } from "react";import logoimg from "../assets/images/bmi logo.png";const bmicalculator = () =&gt; {  const [weight, setweight] = usestate("");  const [height, setheight] = usestate("");  const [bmi, setbmi] = usestate("");  const [result, setresult] = usestate("");  function calculatebmi(weight, height) {    const heightm = height / 100;    const bmiresult = weight / (heightm * heightm);    setbmi(bmiresult.tofixed(2)); // round to 2 decimal places    if (bmiresult  {    if (weight &amp;&amp; height) {      calculatebmi(weight, height);    }  };  return (    <div classname="bmi-container">      <div classname="logo">        @@##@@      </div>      <div classname="input-box">        <div classname="weight-input">          <h4>weight (kg)</h4>          <input type="number" value="{weight}" onchange="{(e)"> setweight(e.target.value)}          /&gt;        </div>        <div classname="height-input">          <h4>height (cm)</h4>          <input type="number" value="{height}" onchange="{(e)"> setheight(e.target.value)}          /&gt;        </div>      </div>      <button onclick="{handlecalculatebmi}" classname="btn">        <h2>calculate bmi</h2>      </button>      <div classname="output-box">        <p>your bmi : <b>{bmi}</b></p>        <p>result : <b>{result}</b></p>      </div>    </div>  );};export default bmicalculator;

import bmicalculator from "./components/bmicalculator";import "./app.css";const app = () =&gt; {  return (    <div classname="app">      <div classname="header">        <h1>bmi calculator</h1>      </div>      <bmicalculator></bmicalculator><div classname="footer">        <p>made with ❤️ by abhishek gurjar</p>      </div>    </div>  );};export default app;

* {  box-sizing: border-box;}body {  margin: 0;  padding: 0;  font-family: sans-serif;  background-color: #008f7d;  color: white;}.app {  display: flex;  flex-direction: column;  align-items: center;  justify-content: space-between;  margin-top: 30px;}.header {  text-align: center;  font-size: 18px;}.bmi-container {  margin: 40px;  width: 500px;  height: 430px;  background-color: white;  color: black;  border-radius: 15px;  display: flex;  flex-direction: column;  align-items: center;  justify-content: center;  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}.logo img {  width: 50px;  height: 50px;  margin: 15px;}.input-box {  display: flex;  flex-direction: column;  align-items: center;}.input-box h4 {  color: gray;}.weight-input,.height-input {  display: flex;  align-items: center;  justify-content: space-between;  gap: 25px;}.weight-input input,.height-input input {  height: 27px;  width: 180px;  font-weight: 400;  font-size: 14px;  border-radius: 7px;}.btn {  margin: 15px;  width: 65%;  height: 10%;  display: flex;  align-items: center;  justify-content: center;  background-color: #087fff;  color: white;  border: 0.5px solid black;  border-radius: 7px;}.btn:hover {  background-color: #2570c1;}.output-box {  margin-top: 20px;  width: 65%;  height: 15%;  display: flex;  flex-direction: column;  align-items: flex-start;  justify-content: center;  background-color: #e2e2e2;  color: black;  border-radius: 7px;  border: 1px solid black;}.output-box p {  margin-left: 20px;  line-height: 0;}.footer {  text-align: center;  font-size: 14px;}

   git clone https://github.com/abhishekgurjar-in/bmi-calculator-react.git

   npm install

   npm start