ご覧いただきありがとうございます。
reactで割り勘アプリを作成しています。
画面から入力された合計金額と人数から
一人当たりの支払額を計算、表示したいです。
javascript
import { createRoot } from 'react-dom/client' import CalcButton from '../components/CalcButton' import {Box} from '@material-ui/core'; import {TextField} from '@material-ui/core'; import { useForm } from "react-hook-form" import React, { useState } from 'react'; const HookTop = () => { type FormData = { totalAmount : number; partySize : number; } let result = 0; const { register, handleSubmit } = useForm() const onSubmit = (data) => { console.log(data) result = data.totalAmount / data.partySize console.log(result) } return ( <form onSubmit={handleSubmit(onSubmit)} class="bg-gray-300 w-screen h-screen flex flex-col items-center justify-center space-y-4" > <input placeholder="合計金額" {...register("totalAmount")} /> <input placeholder="人数" {...register("partySize")} /> <input type="submit" /> <p>一人当たりの支払額 {result}円 </p> </form> ) } export default HookTop
onSubmit内のconsole.log(result)では
一人当たりの支払額を計算できていることは確認できましたが
画面上では0円と表示されたままになってしまっています。
値を保存する、または表示するために足りない処理は何になるでしょうか?
まだ回答がついていません
会員登録して回答してみよう