【react小项目】bmi-calculator

pacong

已于 2024-06-16 09:35:07 修改

阅读量903

点赞数 9

分类专栏： React 文章标签： react.js 前端

于 2024-06-16 01:15:48 首次发布

本文链接：https://blog.youkuaiyun.com/pacong/article/details/139691195

版权

bmi-calculator

初始化项目

第一次提交

在这里插入图片描述

App组件

在这里插入图片描述

启动

在这里插入图片描述

01大致布局

【分支01】

使用了Materialize CSS框架的网格系统（Grid System）来布局页面内容。

在这里插入图片描述

01代码

import React, {
    useState, useEffect } from 'react';
import 'materialize-css/dist/css/materialize.min.css';
import './App.css'
const App = () => {
   
  return (
    <div className='container'>
      {
   /* 标题 */}
      <div className='row center'>
        <h1 className='white-text'>BMI Tracker</h1>
      </div>


      {
   /* 输入框 */}
      <div className='row'>
        <div className='col m12 s12'>
          <div className='row'>
            <div className='col m6 s12'>
              <label htmlFor="weight">Weight (in kg)</label>
              <input
                type="number"
                id="weight"
                name="weight"
                min="1"
                max="999"
                placeholder="50"
              />
            </div>

            <div className='col m6 s12'>
              <label htmlFor="height">Height (in cm)</label>
              <input
                type="number"
                id="height"
                name="height"
                min="1"
                max="999"
                placeholder="175"
              />
            </div>
          </div>

          <div className='center'>
            <button
              id="bmi-btn"
              className="calculate-btn"
              type="button"
            >Calculate BMI</button>
          </div>
          {
    }
        </div>
//

      </div>

      {
   /* 统计图 */}
      <div className='row center white-text'>
        统计图
      </div>

      {
   /* 详细记录信息 */}
      <div>
        <div className='row center'>
          <h2 className='white-text'>7 Day Data</h2>
        </div>

        <div me='data-container row'>
          <div className="col m6 s12">
            <div className="card">
              <div className="card-content">
                <span className="card-title" data-test="bmi">
                  BMI: 20.1
                </span>
                <div className="card-data">
                  <span data-test="weight">Weight: 70 kg</span>
                  <span data-test="height">Height: 180 cm</span>
                  <span data-test="date">Date: 2022/12/12</span>
                </div>
                <button className="delete-btn">
                  X
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className='center'>
        <button className='calculate-btn'>Undo</button>
      </div>


    </div>
  )
}

export default App;

02完善样式

【分支02】
在这里插入图片描述

02代码

body{
   
  background-color: #172B4D;
}
/* .center h1 {
  color: #fff;
} */

input {
   
  background-color: #fff !important;
  border-radius: 44px !important;
  width: 90% !important;
  padding: 0px 15px !important;
}

input:focus {
   
  border-bottom: none !important;
  box-shadow: none !important;
}

label {
   
  display: block;
  color: #fff !important;
  font-size: 1rem !important;
}

.calculate-btn{
   
  background-color: #3f51b5;
  padding: 15px 50px;
  color: white;
  font-size: 16px;
  border-radius: 44px;
  cursor: pointer;
  border: 1px solid #3f51b5;
  margin-bottom: 40px;
  transform: translate3d(0, 0, 0);
  transition: all 0.2s ease;
}

.calculate-btn:hover {
   
  background-color: #fff;
  transform: translate(0px, -2px);
  color: #5364c3;
  box-shadow: 0px 15px 30px -12px rgba(255, 255, 255, 0.2);
}

.calculate-btn:focus {
   
  background-color: #32408f;
}

.calculate-btn:focus:hover {
   
  color: white;
}

.calculate-btn:disabled {
   
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
  cursor: default;
}

.calculate-btn:disabled:hover {
   
  box-shadow: none;
  transform: translate(0, 0);
}

.data-container {
   
  background-color: #1f3a67;
  border-radius: 11px;
  margin-top: 40px;
  padding-top: 40px;
  padding-bottom: 40px;
}

.card{
   
  background-color: #274881 !important;
  color: white;
}

.card-title {
   
  font-weight: 500 !important;
  text-align: center;
}

.card-data {
   
  display: flex;
  justify-content: space-around;
}

.delete-btn {
   
  background-color: #e74c3c;
  color: white;
  border: none;
  border-radius: 50%;
  font-weight: 700;
  padding: 5px 9px;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;

}
.delete-btn:focus {
   
  background-color: #e74c3c;
}

03输入信息模块

【分支03】

1.定义数据
2.定义，初始化数据状态
3.input 改变时，更新数据（受控组件）
4.提交数据
在这里插入图片描述

03代码

// src\components\App\App.jsx
import React, {
    useState, useEffect } from 'react';
import 'materialize-css/dist/css/materialize.min.css';
import './App.css'

// 定义数据
const initialValues = {
   
  weight: '100',
  height: '180',
  data: ''
}

const App = () => {
   
  // 定义，初始化数据状态
  const [state, setState] = useState(initialValues)

  // input 改变时，更新数据
  const handleChange = e => {
   
    let {
    value, name } = e.target;
    setState({
   
      ...state,
      [name]: value,
    })
  }

  // 提交数据
  const handleSubmit = e =>