ReactHooksでBMI計算フォームを作成する（bootstrap/formik/yup使用）

はじめに

• Reactを触り始めたので何度か復讐のために同じようなフォームを何度も作ってみることを目的としています。 　※前回は会員登録フォームを作成したので今回はBMI計算 px-wing.hatenablog.com

• 今回はBMIの計算だけですが、この情報をローカルストレージに蓄積してグラフを出したい。（今のスキルではできない）

サンプルコード

import React,{useState} from 'react'
import {Form, Button} from 'react-bootstrap'
import './siginin.css'
import { Formik } from 'formik'
import * as yup from 'yup'

const Bmi = () => {
  const [bmi, setBmi] = useState({bmi: 0,judge: ''})

  const schema = yup.object({
    bodyHeight: yup.number().min(1,'身長は0以上の数値を入力して下さい。').required('身長を入力してください。'),
    bodyWeight: yup.number().min(1,'体重は0以上の数値を入力して下さい。').required('体重を入力してください。'),
  });

  //https://jaredpalmer.com/formik/docs/overview
  return (
      <Formik
        validationSchema={schema}
        onSubmit={(values) => {
          const a = (values.bodyHeight/100)
          const resultBmi = (values.bodyWeight/(a*a)).toFixed(2)
          alert(resultBmi)
          if(resultBmi<18.5){setBmi({bmi: resultBmi,judge: 'Under weight'});}
          else if(resultBmi<24.9){setBmi({bmi: resultBmi,judge:'Normal weight'});}
          else if(resultBmi<30){setBmi({bmi: resultBmi,judge:'Overweight'});}
          else{setBmi({bmi: resultBmi,judge:'Obesity'});}
      
        }}
        initialValues={{ bodyHeight: '', bodyWeight: '' }}
      >
        {
          ({handleSubmit, handleChange, handleBlur, values, errors, touched}) => (
    <>      
      <h4>BMI計算</h4>
      <Form  noValidate onSubmit={handleSubmit}>
        <Form.Group controlId="formGroupName">
          <Form.Label>身長</Form.Label>
          <Form.Control name="bodyHeight" type="number" min="0" step="0.01" placeholder="身長を入力して下さい" value={values.contract_undeliverable_datescontract_undeliverable_dates} onBlur={handleBlur} onChange={handleChange}  isInvalid={!!(touched.bodyHeight && errors.bodyHeight)}/>
          <Form.Control.Feedback type="invalid">{errors.bodyHeight}</Form.Control.Feedback>
        </Form.Group>
        <Form.Group controlId="formGroupWeight">
          <Form.Label>体重</Form.Label>
          <Form.Control name="bodyWeight" type="number" min="0" step="0.01" placeholder="体重を入力して下さい" value={values.bodyWeight} onBlur={handleBlur} onChange={handleChange}  isInvalid={!!(touched.bodyWeight && errors.bodyWeight)}/>
          <Form.Control.Feedback type="invalid">{errors.bodyWeight}</Form.Control.Feedback>
        </Form.Group>
        <div className='text-center'>
          <Button variant="primary" type="submit">計算</Button>
        </div>
      </Form>
      BMI: {bmi.bmi}<br />
      診断: {bmi.judge}
    </>    
      )}
      </Formik>      
  )
}

export default Bmi

完成した画面