Javascript 如何使用 onChange 事件对多个输入的值进行求和、除法 ｜react JS

我试着在react中制作我的第一个应用程序，一切正常，但我试着计算账单金额和人数，并将账单除以人数，然后添加小费.我知道对某些人来说，这可能是5分钟的解决方案，但我昨天就开始了这方面的工作，仍然找不到解决方案.

如果有人 Select 小费，我想把账单金额除以personAmount+小费.我做错了什么

import React, { useState } from 'react'
import style from './BillSplitter.module.css'

const tips = [5, 10, 15, 25]



const Input = ({ label, id, handleChange, name, type, placeholder }) => (
  <>
    <label className={`${style.label}`} htmlFor={id}>{label}</label>
    <input className={`${style.input}`} type={type || "number"} id={id} name={name || id} placeholder={placeholder} onChange={handleChange}></input>
    <br />
  </>
);

const SelectTip = ({ tip }) => {
  <>
    <button className='tipButton' value={tip}></button>
  </>
}

function BillSplitter() {
  const [tipAmount, setTipAmount] = useState(0)
  const [billAmount, setBillAmount] = useState(0)
  const [personAmount, setPersonAmount] = useState(0)


  function handleChange(e) {
    console.log(e.target.value)
  }



  return (
    <div className={`${style.wrapper}`}>
      <div className={`${style.box}`}>
        <div className={`${style.top}`}>
          <h2 className={`${style.title}`}>Bill Splitter</h2>
          <p className={`${style.personBillAmount}`}>Person Bill Amount</p>
          <p onChange={handleChange} className={`${style.totalPersonAmount}`} >$ {tipAmount}</p>
        </div>
        <div className={`${style.bottom}`}>

          <Input handleChange={handleChange} className={`${style.clases}`} placeholder='Amount of bill' label="Bill value">{billAmount}</Input>

          <Input handleChange={handleChange} className={`${style.clases}`} placeholder='Number of people' label="Number of people">{personAmount}</Input>

          <div className={`${style.tipBox}`}>
            <p>Select tip</p>
            {tips.map((tip) => {
              return <button className={`${style.tipButton}`}>{tip} %</button>
            })}
          </div>
        </div>
      </div>
    </div>


  )
}


export default BillSplitter